How Can I Trigger CSS Animations Using JavaScript?

Trigger CSS Animations in JavaScript

Triggering CSS animations with plain JavaScript is a simple but effective way to add interactivity to your web pages. This approach is especially useful when you need to target specific animations for a range of events without resorting to jQuery or other frameworks.

Using Event Listeners to Trigger Animations

To trigger an animation using JavaScript, you can use event listeners to listen for specific events that trigger the animation. For example, you can use the scroll event to trigger an animation when a user scrolls the page.

// 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";
  }
});

Using Class Manipulation

Another method to trigger animations is by adding or removing classes from the element. This is typically done with JavaScript's classList API. For instance, you can add or remove a class called animated to toggle an animation on the fly.

// 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');
}

By combining event listeners and class manipulation, you can trigger CSS animations in JavaScript and control the timing and behavior of these animations in response to user interactions or other events.

The above is the detailed content of How Can I Trigger CSS Animations Using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!