JavaScript vs CSS 动画

问题

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

解答

CSS 动画

优点：

性能更好，浏览器会对 CSS3 动画做优化（如硬件加速）。代码简洁，使用 transition 或 animation 即可实现。

.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 0.3s ease;
}

缺点：

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

JavaScript 动画

优点：

控制能力强，可以逐帧控制、动态调整参数，实现复杂的交互逻辑。兼容性好，可以兼容 IE6 等老旧浏览器。

function animate(element, target, duration) {
  const start = element.offsetLeft;
  const distance = target - start;
  const startTime = Date.now();
  
  function step() {
    const elapsed = Date.now() - startTime;
    const progress = Math.min(elapsed / duration, 1);
    
    element.style.left = start + distance * progress + 'px';
    
    if (progress < 1) {
      requestAnimationFrame(step);
    }
  }
  
  requestAnimationFrame(step);
}

缺点：

代码量较大，性能不如 CSS 动画（除非精心优化）。

使用建议

简单的过渡效果和交互动效优先使用 CSS 动画。复杂的动画控制、需要动态计算或精确控制的场景使用 JavaScript 动画。

关键点

• CSS 动画性能更好且代码简洁，适合简单的过渡和交互效果
• JavaScript 动画控制能力强，适合复杂逻辑和精确控制
• CSS 动画兼容性较差，JavaScript 可兼容老旧浏览器
• 使用 requestAnimationFrame 可以优化 JavaScript 动画性能
• 根据场景选择：简单用 CSS，复杂用 JavaScript