CSS 动画用 `transition` 还是 `animation`？

两个状态之间的变化用 transition，例如悬停、展开。一段自己会播放、可以循环或分关键帧的运动用 animation。两者都尽量只动画 transform 和 opacity。

原理

transition 需要属性值真的变了才会跑，还要指定属性和时长。all 会把你没打算动画的属性也算进去，布局属性一变就会卡。

@keyframes 描述若干时间点的样式。animation 控制时长、缓动、延迟、次数和方向。animation-fill-mode: forwards 让元素停在最后一帧，否则会回到第一帧的样式。

@media (prefers-reduced-motion: reduce) 里关掉非必要动画。视差、大幅位移对前庭敏感的人是负担。

JS 动画用 Web Animations API 或在合成器友好的属性上改样式。用 requestAnimationFrame 改 left 仍然会触发布局。能用 CSS 表达的，不要每帧写样式。

追问

怎么做进场离场？

离场时元素不能立刻从 DOM 删掉。先加离开的类，在 transitionend 或动画结束回调里再移除。只设 display: none 不会有过渡。Vue、React 的过渡组件包的就是这套时序。

will-change 要写吗？

只加在确实要提前提升图层、且数量很少的元素上。全页都写会占内存。动画结束后可以去掉。

易错点

动画 height: auto 不能插值。要动画高度，就在 0 和具体像素之间过渡，或用网格行 fr 的技巧。
transition 写在悬停规则里而不是元素本身，鼠标移出时没有回程动画。
无限循环的装饰动画没有提供减少动效的媒体查询。

相关