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 处理“动态”部分（比如滚动中持续更新位置）。
立即学习“Java免费学习笔记（深入）”；
- 例如：一个吸顶导航栏，初始固定用
position: sticky（CSS），但配合滚动做透明度渐变 + 高度压缩，就可用 rAF 读取scrollY并动态设置内联样式 - 再如：用 CSS 实现 hover 缩放，但点击后触发动态路径动画（SVG
stroke-dashoffset），则用 rAF 逐帧更新偏移量
性能与兼容性提醒
CSS3 动画在 iOS Safari 和旧版 Android 浏览器中偶有渲染 bug（如 transform 闪烁），而 rAF 在 IE10+ 和所有现代浏览器中稳定支持（IE9 需 polyfill）。不过，rAF 写错容易导致无限递归调用或内存泄漏，务必注意清理（如用 cancelAnimationFrame）。
不复杂但容易忽略。
