CSS3动画适合声明式简单交互，rAF适合需JS控制的复杂动画；二者可混合使用，如CSS处理缓动基底、rAF实现鼠标跟随与弹性效果。
JavaScript实现动画效果，核心在于控制元素在时间轴上的状态变化。CSS3动画和requestAnimationFrame（简称 rAF）不是互斥方案，而是适用场景不同：CSS3适合声明式、简单交互动画；rAF适合需要精确控制、复杂逻辑或动态计算的动画。
CSS3动画：声明式、高性能、易维护
CSS3动画（包括 transition 和 @keyframes）由浏览器渲染引擎直接优化，通常运行在合成线程（compositor thread），不触发重排（reflow）和重绘（repaint），性能高且功耗低。
- 适合按钮悬停、卡片翻转、淡入淡出、尺寸缩放等预设行为
- 支持硬件加速（如对
transform和opacity属性动画） - 代码简洁，样式与行为分离，便于复用和主题切换
- 缺点是难以响应运行时数据（比如鼠标实时位置、物理模拟）、无法中途精确暂停/跳帧/反向播放（除非用 JS 控制
animation-play-state或currentTime）
requestAnimationFrame：命令式、高可控、适合复杂逻辑
requestAnimationFrame 是浏览器提供的“下一帧绘制前执行回调”的机制，JS 动画的核心工具。它让动画节奏与屏幕刷新率（通常是 60fps）同步，避免 setTimeout/setInterval 的丢帧和卡顿问题。
- 适合游戏、数据可视化（如 ECharts 自定义渲染）、拖拽跟随、粒子系统、物理引擎（如重力、碰撞）
- 每一帧可读取 DOM 状态、计算新位置、更新 Canvas/SVG、甚至结合 Web Audio 做音画同步
- 可随时中止、插值、缓动函数自定义、帧间差值平滑（如使用
performance.now()计算 delta time） - 注意：频繁操作 DOM 样式（如反复改
element.style.left）会触发布局抖动，应优先用transform+will-change或直接操作 Canvas
如何选择？看三个关键点
判断标准不是“哪个更好”，而是“哪个更合适”：
立即学习“Java免费学习笔记（深入）”；
- 是否需要 JS 参与决策？ 如果动画起点、终点、速度、时机依赖用户输入、API 响应或数学计算（如抛物线运动），选 rAF
- 是否追求极致性能和电池续航？ 纯视觉反馈（如开关切换、加载旋转）优先 CSS3，尤其在移动端
- 是否要统一管理多个动画？ 可混合使用：用 CSS3 做基础过渡，用 rAF 处理关键帧逻辑（例如在 transition 结束后触发下一步）
一个实用组合示例
实现“跟随鼠标、带弹性阻尼”的悬浮气泡：
- 用 CSS3 定义基础
transform: translate()和transition: transform 0.2s ease-out做缓动基底 - 用 rAF 实时读取鼠标坐标，计算目标偏移，并动态设置
style.transform - 加入简单弹簧算法（如 damping + stiffness），让运动更自然——这一步只能靠 JS
不复杂但容易忽略：现代框架（如 React、Vue）中，优先用 CSS-in-JS 库（如 Framer Motion）或内置过渡系统，它们底层已智能融合 CSS 动画与 rAF，开发者只需关注状态和意图。
