为什么翻译工作没有过渡:全部

Question

为什么动画在没有的情况下工作

transition: all

这是代码，

.btn:link,
.btn:visited {
}
.btn:hover {
transform: translateY(-3px);
}
.btn:active {
transform: translateY(-1px);
}

悬停和活动都在平移。怎么了？

Answer 1

Transform不依赖于转换来完成其工作。转换的工作，所以使转换"动画化">

.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="https://i.stack.imgur.com/MDWO4.jpg?s=48">
<img class="rotate transition" src="https://i.stack.imgur.com/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>