为什么没有动画效果
transition: all
?
这是代码,
.btn:link,
.btn:visited {
}
.btn:hover {
transform: translateY(-3px);
}
.btn:active {
transform: translateY(-1px);
}
悬停和事件都在翻译。怎么了?
最佳答案
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>
关于html - 为什么翻译在没有转换的情况下工作 : all?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61035975/