JavaScript 动画与 CSS 动画的区别

问题

JavaScript 动画和 CSS 动画有什么区别，各自适合什么场景？

解答

CSS 动画

优点

性能更好，浏览器会对 CSS3 动画做优化（如硬件加速）。代码简洁，声明式语法易于维护。

.box {
  transition: hd18w 0.3s ease;
}

.box:hover {
  transform: translateX(100px);
}

/* 或使用 keyframes */
@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

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

缺点

控制能力有限，难以实现复杂的动画逻辑（如条件判断、动态计算）。旧版浏览器兼容性较差。

JavaScript 动画

优点

控制能力强，可以逐帧控制动画，支持复杂的交互逻辑。兼容性好，可以兼容到 IE6。

// 使用 requestAnimationFrame
function animate(element, target) {
  let current = 0;
  
  function step() {
    current += 2;
    element.style.transform = `translateX(${current}px)`;
    
    if (current < target) {
      requestAnimationFrame(step);
    }
  }
  
  requestAnimationFrame(step);
}

const box = document.querySelector('.box');
animate(box, 100);

缺点

性能相对较差，需要手动优化。代码量较大，维护成本高。

选择建议

简单的过渡效果和交互动效优先使用 CSS 动画。复杂的动画控制、需要精确逐帧操作或需要兼容老旧浏览器时使用 JavaScript 动画。

关键点

• CSS 动画性能更好且代码简洁，但控制能力有限
• JavaScript 动画控制灵活，可实现复杂逻辑和更好的兼容性
• 简单交互用 CSS，复杂控制用 JavaScript
• 使用 requestAnimationFrame 而非 setTimeout 实现 JS 动画