html - 为什么翻译在没有转换的情况下工作 : all?

Question

为什么没有动画效果

transition: all

?

这是代码，

.btn:link,
.btn:visited {
 }

.btn:hover {
   transform: translateY(-3px);
}

.btn:active {
   transform: translateY(-1px);
}

悬停和事件都在翻译。怎么了？

Answer 1

Transform 不依赖转换来完成它的工作。 transition 的工作是让转换“动画化”

.btn:link,
.btn:visited {}

.btn:hover {
  transform: translateY(-3px);
}

.btn:active {
  transform: translateY(-1px);
}

.transition {
  transition: all 500ms ease-in-out;
}

.blue:hover {
  color: blue;
}

.rotate:hover {
  transform: rotate(180deg);
}

<h3>TranslateY</h3>
<button class="btn">
a button with only transform
</button>

<button class="btn transition">
a button with transform and transition
</button>

<h3>Rotate (hover image)</h3>

<img class="rotate" src="/image/MDWO4.jpg?s=48">
<img class="rotate transition" src="/image/MDWO4.jpg?s=48">

<h3>Color</h3>

<p class="blue">blue on hover without transition</p>
<p class="blue transition">blue on hover with transition</p>