JS 动画 vs CSS 动画：究竟有何不同？-Toy模板网

这篇具有很好参考价值的文章主要介绍了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 函数创建连续的动画帧，从而实现元素向右移动。