How Can I Trigger CSS Animations with JavaScript on Scroll Without jQuery?

Trigger CSS Animations in JavaScript without jQuery

Problem:

You want to trigger a CSS animation when the user scrolls the page but without using jQuery.

Solution:

One way to trigger CSS animations in JavaScript is by using the classList property. Here's how you can do it:

1. Create a CSS class with the animation properties.

   For example:

   .animated {
     animation: my-animation 2s forwards;
   }

2. Add an event listener to the document.

   The scroll event is fired whenever the user scrolls the page. You can use this event to trigger your animation. Here's how:

   document.addEventListener('scroll', (event) => {
     // Get the element you want to animate.
     const element = document.getElementById('my-element');
   
     // Add the 'animated' class to the element.
     element.classList.add('animated');
   });

3. Remove the 'animated' class when the animation is complete.

   You can use the animationend event to detect when the animation has finished. Here's how:

   element.addEventListener('animationend', (event) => {
     // Remove the 'animated' class from the element.
     element.classList.remove('animated');
   });

Example:

Here's a complete example of how to trigger a CSS animation when the user scrolls the page:

  <style>
    .animated {
      animation: my-animation 2s forwards;
    }

    @keyframes my-animation {
      0% {
        opacity: 0;
      }

      100% {
        opacity: 1;
      }
    }
  </style>


  <div></div>

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