CSS3动画vsrequestAnimationFrame性能对比

本篇文章向大家介绍《JavaScript动画：CSS3与requestAnimationFrame对比》，主要包括，具有一定的参考价值，需要的朋友可以参考一下。

CSS3动画适合声明式简单交互动画，requestAnimationFrame适合需精确控制、数据驱动或复杂逻辑的动画；前者性能高但灵活性低，后者可实时读取DOM、响应交互、同步音频等。

CSS3 动画更适合简单、声明式的交互动画；requestAnimationFrame 更适合需要精确控制、数据驱动或复杂逻辑的动画。 选哪个不看“高级感”，而看你的动画是否要响应用户输入、计算物理效果、或和 Canvas/WebGL 协同——这些 requestAnimationFrame 能做，CSS3 做不了。

什么时候必须用 requestAnimationFrame

当动画帧需要实时读取/修改 DOM 属性、依赖上一帧状态，或与用户交互强耦合时，requestAnimationFrame 是唯一选择。CSS3 动画是声明式、隔离的，无法在运行中动态调整关键参数（比如根据鼠标位置实时改变加速度）。

• 实现滚动视差、拖拽跟随、粒子系统、Canvas 渲染循环
• 需要在每一帧执行碰撞检测、插值计算、或调用 getBoundingClientRect() 获取最新布局信息
• 动画需与音频时间轴同步（如 Web Audio API 的 currentTime）
• 要手动中断、暂停、反向播放，且要求毫秒级精度（CSS animation-play-state 有延迟且不可靠）

什么时候优先用 CSS3 动画

CSS3 动画由浏览器直接在合成线程处理，不触发重排（reflow），性能开销极低，尤其适合大量元素同时动、或移动端低端设备。

• 按钮悬停缩放、加载指示器旋转、卡片淡入淡出
• 使用 transform 和 opacity 属性（这两类属性可 GPU 加速）
• 动画曲线固定（如 ease-in-out）、无需 JS 控制节奏
• 需要利用 @keyframes 实现多段、循环、延迟组合的视觉效果

.spinner {
  animation: spin 1s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

常见错误：混用导致卡顿或失效

把 transform 动画写在 CSS 里，又用 JS 频繁修改 element.style.transform，会强制浏览器放弃硬件加速路径，退回到 CPU 渲染。更隐蔽的问题是：CSS 动画正在运行时，JS 修改同一属性会立即覆盖动画状态，造成跳变。

• 避免在 CSS 动画生效期间，用 JS 直接写 element.style.transform —— 改用 element.animate() 或切换 CSS class
• 不要用 setTimeout 模拟帧循环；它无法对齐屏幕刷新率，容易掉帧
• 用 will-change: transform 提前提示浏览器该元素将动画，但别滥用（可能引发内存占用上升）
• 监听 animationend 事件比轮询 getComputedStyle 更可靠，但注意它不触发于 animation-play-state: paused 状态

一个折中方案：element.animate() API

这是 Web Animations API 的一部分，既保留了 CSS 动画的性能优势（支持 transform/opacity 硬件加速），又能用 JS 控制播放、暂停、时间轴和回调，比纯 CSS 灵活，比裸写 requestAnimationFrame 简洁。

const anim = element.animate(
  [{ opacity: 0 }, { opacity: 1 }],
  { duration: 300, easing: 'ease-out' }
);
anim.pause();
anim.play();
anim.onfinish = () => console.log('done');

注意：IE 完全不支持，Safari 对部分选项（如 iterationStart）支持有限；生产环境需检查 Element.prototype.animate 是否存在。

真正难的不是选哪个技术，而是判断动画是否真的需要 JS 参与——多数 UI 动效，CSS3 就够了；一旦你开始在 requestAnimationFrame 回调里写 if 判断或调用 Math.sin，说明你已经跨过那个分界线了。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《CSS3动画vsrequestAnimationFrame性能对比》文章吧，也可关注golang学习网公众号了解相关技术文章。