如何使用 JavaScript 触发 CSS 动画？

在 JavaScript 中触发 CSS 动画

使用纯 JavaScript 触发 CSS 动画是为网页添加交互性的一种简单而有效的方法。当您需要为一系列事件定位特定动画而不求助于 jQuery 或其他框架时，此方法特别有用。

使用事件监听器触发动画

到使用 JavaScript 触发动画，您可以使用事件侦听器来侦听触发动画的特定事件。例如，您可以使用滚动事件在用户滚动页面时触发动画。

// Add event listener to the window object
window.addEventListener('scroll', function() {
  // Get the element(s) you want to animate
  var elements = document.querySelectorAll('.my-animation');

  // Loop through the elements and start the animation
  for (var i = 0; i < elements.length; i++) {
    elements[i].style.animation = "my-animation 2s 2s forward";
  }
});

使用类操作

触发动画的另一种方法是通过在元素中添加或删除类。这通常是通过 JavaScript 的 classList API 完成的。例如，您可以添加或删除名为animated的类来动态切换动画。

// Get the element(s) you want to animate
var elements = document.querySelectorAll('.my-animation');

// Add the "animated" class to start the animation
for (var i = 0; i < elements.length; i++) {
  elements[i].classList.add('animated');
}

// Remove the "animated" class to stop the animation
for (var i = 0; i < elements.length; i++) {
  elements[i].classList.remove('animated');
}

通过组合事件侦听器和类操作，您可以在 JavaScript 中触发 CSS 动画并控制时间和行为这些动画响应用户交互或其他事件。

以上是如何使用 JavaScript 触发 CSS 动画？的详细内容。更多信息请关注PHP中文网其他相关文章！