17370845950

CSS3动画适合声明式简单交互动画，rAF适合需精细控制的动态复杂动画；二者常混合使用，CSS处理静态部分，rAF处理动态逻辑，兼顾性能与灵活性。

CSS3 动画和 requestAnimationFrame（简称 rAF）不是“二选一”的关系，而是适用场景不同：**CSS3 适合声明式、简单交互动画；rAF 更适合需要精细控制、复杂逻辑或动态计算的动画**。

CSS3 动画更适合这些情况

CSS3 动画（包括 transition 和 @keyframes）由浏览器直接在合成线程处理，性能高、功耗低，且写法简洁。

• 按钮悬停、卡片翻转、加载指示器等基础交互动画
• 动画效果不依赖 JavaScript 状态（比如不随用户滚动实时变化）
• 需要硬件加速时，给元素加 transform: translateZ(0) 或 will-change: transform 即可触发 GPU 渲染
• 动画需兼容回退（如用 @supports 检测支持性）时更易维护

requestAnimationFrame 更适合这些情况

rAF 是 JavaScript 控制动画帧的底层 API，它让 JS 能与屏幕刷新率同步，避免丢帧，适合需要每帧干预的场景。

• 游戏、数据可视化（如 Canvas 绘图、粒子系统）、滚动视差等动态内容
• 动画参数随用户输入实时变化（例如拖拽中跟随鼠标、惯性滚动）
• 需要精确控制播放/暂停/倒放/时间缩放（如动画编辑器、教学演示）
• 要结合物理模型（如弹簧动画、重力模拟），CSS 的贝塞尔曲线难以表达时

实际开发中常混合使用

没必要非此即彼。现代做法往往是：用 CSS 处理“静态”部分（比如入场/出场），用 rAF 处理“动态”部分（比如滚动中持续更新位置）。

• 例如：一个吸顶导航栏，初始固定用 position: sticky（CSS），但配合滚动做透明度渐变 + 高度压缩，就可用 rAF 读取 scrollY 并动态设置内联样式
• 再如：用 CSS 实现 hover 缩放，但点击后触发动态路径动画（SVG stroke-dashoffset），则用 rAF 逐帧更新偏移量

性能与兼容性提醒

CSS3 动画在 iOS Safari 和旧版 Android 浏览器中偶有渲染 bug（如 transform 闪烁），而 rAF 在 IE10+ 和所有现代浏览器中稳定支持（IE9 需 polyfill）。不过，rAF 写错容易导致无限递归调用或内存泄漏，务必注意清理（如用 cancelAnimationFrame）。

不复杂但容易忽略。