CSS 动画与 JS 动画对比

问题

CSS 动画和 JavaScript 实现的动画分别有哪些优缺点？

解答

CSS 动画

优点

浏览器可以对 CSS 动画进行优化，比如使用 GPU 加速。代码相对简单，性能调优方向明确。对于低版本浏览器，CSS3 动画可以自然降级，而 JS 动画需要额外处理兼容性。

.box {
  animation: slide 1s ease-in-out;
}

@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

缺点

运行过程控制较弱，无法在动画执行中附加事件或回调函数。复杂动画的 CSS 代码会变得冗长笨重，难以维护。

JavaScript 动画

优点

控制能力强，可以在动画播放过程中进行开始、暂停、回放、终止等操作。动画效果更丰富，曲线运动、冲击闪烁、视差滚动等复杂效果只能用 JS 实现。兼容性相对较好。

function animate(element, from, to, duration) {
  const start = Date.now();
  
  function step() {
    const progress = (Date.now() - start) / duration;
    if (progress < 1) {
      element.style.transform = `translateX(${from + (to - from) * progress}px)`;
      requestAnimationFrame(step);
    }
  }
  
  requestAnimationFrame(step);
}

缺点

代码复杂度高于 CSS 动画。JavaScript 在浏览器主线程中运行，与样式计算、布局、绘制等任务共享线程，可能造成阻塞和丢帧。

关键点

• CSS 动画性能更好，浏览器可以优化，但控制能力有限
• JS 动画控制灵活，可以实现复杂效果，但可能影响主线程性能
• 简单动画优先使用 CSS，复杂交互动画使用 JS
• 使用 requestAnimationFrame 可以优化 JS 动画性能
• CSS 动画适合状态切换，JS 动画适合需要精确控制的场景