JS 动画 vs CSS 动画：究竟有何不同？

在 Web 前端开发中，动画是提高用户体验的关键因素之一。我们通常可以使用 JavaScript（JS）和 CSS 来创建动画效果。但是，这两者之间有哪些区别呢？在本文中，我们将深入研究 JS 动画和 CSS 动画，探讨它们的异同，以及何时使用哪一种。

CSS 动画

CSS 动画是使用 CSS 样式属性来定义的动画效果。这些属性通常包括 animation、transition、transform 等。CSS 动画的优点在于它们非常简单且性能良好。以下是一个简单的 CSS 动画示例：

/* CSS */
@keyframes slide-in {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

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

在这个示例中，我们定义了一个名为 slide-in 的 CSS 动画，该动画将元素从左侧滑入屏幕。然后，我们将这个动画应用到具有 slide 类的元素上。

JS 动画

与 CSS 动画不同，JS 动画是通过 JavaScript 代码来实现的。它们提供了更大的灵活性，允许您根据需要动态更改动画参数。以下是一个简单的 JS 动画示例：

<!-- HTML -->
<div class="box" id="animateMe">点我动起来</div>

// JavaScript
const box = document.getElementById("animateMe");

box.addEventListener("click", () => {
  let position = 0;

  function animate() {
    if (position < 200) {
      position += 2;
      box.style.left = position + "px";
      requestAnimationFrame(animate); // 递归调用以创建连续动画帧
    }
  }

  animate(); // 启动动画
});

在这个示例中，我们通过点击一个

元素来触发 JS 动画。我们使用 requestAnimationFrame 函数创建连续的动画帧，从而实现元素向右移动。

区别和何时使用

性能：

CSS 动画通常比 JS 动画性能更好，因为它们受浏览器的硬件加速支持。
JS 动画可以更精确地控制动画行为，但如果不小心使用，可能会导致性能问题。

复杂性：

CSS 动画适用于简单的过渡和动画效果，不需要复杂的逻辑。
JS 动画适用于需要动态计算或用户交互的复杂动画。

灵活性：

CSS 动画在创建时需要固定的时间和参数。
JS 动画允许您在运行时更改动画参数，实现更复杂的交互。

浏览器支持：

CSS 动画得到了广泛支持，而 JS 动画可能需要处理不同浏览器的差异。

何时使用哪一种？

如果需要简单的过渡或动画效果，首选 CSS 动画。
如果需要复杂的、交互式的动画效果，或者需要在运行时根据条件更改动画行为，那么 JS 动画更适合。

希望本文对您有所帮助，也希望路过的大佬不吝赐教！