时间戳

首页 > 解决方案 > 为什么翻译工作没有过渡：全部？

html - 为什么翻译工作没有过渡：全部？

问题描述

为什么动画没有工作

transition: all

?

这是代码，

.btn:link,
.btn:visited {
 }

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

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

悬停和活动都在翻译。怎么了？

标签： htmlcss

解决方案

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>

推荐阅读