动画应提升体验而非干扰，性能与可访问性要同步考虑。

核心概念

• 优化动画属性，优先 transform 与 opacity。
• prefers-reduced-motion 提供降级方案。
• 关键帧与过渡需控制持续时间与缓动。

实战步骤

• 使用 @keyframes 构建时间线动画。
• 结合 CSS 变量调节动画参数。
• 通过 DevTools Performance 面板分析帧率。

合理的动画能提升体验，但需要兼顾性能与可访问性。

核心概念

• Transition 与 TransitionGroup 提供进入、离开、列表过渡。
• CSS 自定义属性结合帧动画构建主题化动效。
• 对 prefers-reduced-motion 用户提供降级方案。

实战步骤

• 使用 Motion One 或 GSAP 创建复杂时间线动画。
• 通过组合式函数封装交互反馈（hover、press、drag）。
• 将动画参数抽离为配置，支持 A/B 测试。