Transition 过渡

过渡把属性从一个可计算值平滑地变到另一个值。它依赖状态变化，例如悬停、获得焦点或类名切换；没有起点和终点，过渡不会自己循环。

.button {
  background: white;
  transition: background-color 160ms ease, transform 160ms ease;
}
.button:hover { background: #eef; transform: translateY(-2px); }

transition-property、transition-duration、transition-timing-function 和 transition-delay 共同决定变化。不是所有属性都能平滑插值；从 display: none 到 block 也不能简单依靠 transition 做出退出动画。状态先改变，过渡只是呈现中间帧，不能替代状态管理。

实验与练习

用按钮的 hover、focus-visible 和一个可切换类分别触发颜色与位移过渡。改变 duration、delay 和一个不可插值属性，观察哪些变化可动画、哪些会瞬间切换。用键盘重复实验，确保焦点反馈不依赖 hover。

可运行微实验：区分状态、时间线与合成

为同一元素分别添加 transition、keyframes 和 transform。记录触发条件、持续时间、动画是否可逆、是否影响布局；打开 Performance 面板观察只改 transform 与同时改 width/top 的差异，并在 prefers-reduced-motion: reduce 下验证降级。

常见错误

• 只写 transition，不写真正变化的属性。
• 把 display、height:auto 等不可直接插值的变化当作普通过渡。
• 让过渡延迟阻碍错误或焦点反馈。

继续阅读

需要完整时间序列时使用关键帧：Animation 关键帧动画。

练习

1. 用最小输入复现“Transition 过渡”的成功路径，并记录可观察结果。
2. 改变一个时序、数据或宿主条件，解释结果为何变化。
3. 删除清理、校验或降级分支，写出能证明缺陷的断言。

查看本节答案