现代 CSS 动画完全指南：从 Transition 到 Web Animations API

现代 CSS 动画完全指南：从 Transition 到 Web Animations API

动画是提升用户体验的关键。本文涵盖从基础 CSS 过渡到高性能 Web Animations API 的完整技能树。

CSS Transition（过渡）

最简单的动画方式。定义属性变化的持续时间和缓动函数。适合 hover、focus 等简单交互。关键属性：transition-property、transition-duration、transition-timing-function、transition-delay。

CSS Animation / Keyframes

比 Transition 更强大，可以定义多个关键帧，控制动画方向、次数、填充模式等。使用 @keyframes 定义动画步骤，animation 属性应用动画。适合加载动画、入场动画等复杂场景。

动画性能优化

浏览器渲染管线：JavaScript → Style → Layout → Paint → Composite。动画应尽量只触发 Composite（transform 和 opacity），避免触发 Layout（如 width、height）。使用 will-change 提前告知浏览器准备优化。

prefers-reduced-motion

尊重用户的系统偏好。对于有前庭功能障碍的用户，动画可能导致不适。使用媒体查询 @media (prefers-reduced-motion: reduce) 关闭或简化动画。

Web Animations API

JavaScript 原生的动画 API，结合了 CSS 动画的声明性和 JavaScript 的灵活性。可以在运行时控制动画的播放、暂停、反转。比直接操作 style 性能更好。

总结

动画的关键原则：使用 transform 和 opacity 获得 60fps、避免触发布局的属性、用 will-change 提前告知浏览器、尊重用户的 prefers-reduced-motion 设置。好的动画是微妙而有目的的。