17370845950

CSS动画适合纯视觉变化、无需JS控制的场景，如按钮悬停变色、加载旋转、页面淡入；rAF适合需逐帧控制的动态动画，如鼠标跟随、Canvas绘图、自定义缓动。

css动画适合什么场景

纯视觉变化、无需JavaScript控制的动画，比如按钮悬停变色、加载指示器旋转、页面淡入，用 @keyframes + animation 最轻量。浏览器直接在合成线程处理，不触发重排（reflow），性能几乎无负担。

但限制明显：animation 无法动态修改关键帧数值（比如把旋转角度从 90deg 改成 120deg），暂停/恢复依赖 animation-play-state，时间控制粗糙，且无法读取当前动画进度。

• 适合：图标旋转、模态框入场、状态切换过渡
• 不适合：拖拽跟随、滚动视差、物理模拟（如弹簧效果）
• 注意：用 transform 和 opacity 属性，避免触发布局计算；别对 width/height 做动画

requestAnimationFrame 适合什么场景

需要逐帧控制逻辑的动画必须用 requestAnimationFrame。它让 JavaScript 在每次屏幕刷新前执行一次回调，节奏与显示器同步（通常是 60fps），比 setTimeout 更精准、更节能。

典型用途是动画状态由用户输入或数据驱动，比如鼠标跟随、Canvas 绘图、自定义缓动曲线、游戏循环。

• 必须手动管理状态（位置、速度、时间戳）
• 可以随时中断、反向、插值、响应事件（如 scroll、pointermove）
• 容易写错导致掉帧：避免在回调里做 DOM 查询、样式计算、大数组操作

let x = 0;
function animate() {
  x += 2;
  element.style.transform = `translateX(${x}px)`;
  if (x < 400) requestAnimationFrame(animate);
}
animate();

两者能混用吗？怎么协作

可以，而且推荐分层使用：CSS 负责“静态可预测”的部分，JavaScript 负责“动态需响应”的部分。

例如做一个卡片翻转效果：翻转动作本身用 transform: rotateY + CSS 动画，但是否翻转、翻转角度由 JS 根据点击或滚动位置决定——这时用 JS 控制元素的 class 或 style.transform，再靠 CSS 过渡收尾。

• 用 element.animate()（Web Animations API）可桥接二者：JS 启动，CSS 定义关键帧，支持取消和事件监听
• 避免同时对同一属性做 CSS 动画和 JS requestAnimationFrame 修改（如都改 transform），会冲突或覆盖
• 检测硬件加速是否生效：打开 Chrome DevTools → Rendering → 勾选 “Paint flashing”，看动画区域是否绿色闪烁

性能差异的关键点在哪

不是“谁更好”，而是“谁更少走主线程”。CSS 动画只要属性可合成（transform、opacity），就完全绕过 JS 引擎和布局引擎；而 requestAnimationFrame 回调哪怕只做一行 element.style.left = '100px'，也会强制触发样式计算和布局，卡顿立现。

• 查是否触发重排：在 DevTools 的 Performance 面板录一段动画，看 Flame Chart 里有没有 Layout / Recalculate Style
• 移动端尤其敏感：iOS Safari 对非合成属性动画非常慢，甚至直接跳帧
• 不要迷信“60fps”数字：人眼对卡顿极其敏感，连续 3 帧超过 16ms 就会觉得不顺

实际项目里，先问自己：这个动画的起始/结束状态能不能提前写死？中间过程要不要响应用户操作？如果答案都是“否”，就用 CSS；只要有一个“是”，就得上 requestAnimationFrame 或 Web Animations API。很多所谓“性能问题”，其实源于没分清控制权该交给 CSS 还是 JS。