如何使用 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中文網其他相關文章！