HTML | DOM AnimationEvent

Last Updated : 07 Jul, 2022

In the HTML document, AnimationEvent interface is used to represent events providing information related to animations. AnimationEvent contains properties such as animationName, elapsedTime and pseudoElement.

animationName: The animationName property returns the name of the event animation. It returns the value of the animation-name CSS property associated with the transition.
Syntax:

event.animationName;

Return Type: It returns a string which represents the name of the animation.

Example-1:

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        div { 
            width: 550px; 
            height: 50px; 
            background: green; 
            position: relative; 
            -webkit-animation-name: animate; 
            /* Chrome, Safari, Opera */ 
            -webkit-animation-duration: 5s; 
            /* Chrome, Safari, Opera */ 
            animation-name: animate; 
            animation-duration: 5s; 
        } 
        /* Chrome, Safari, Opera */ 
          
        @-webkit-keyframes animate { 
            from { 
                top: 0px; 
            } 
            to { 
                top: 500px; 
            } 
        } 
          
        @keyframes animate { 
            from { 
                top: 0px; 
            } 
            to { 
                top: 500px; 
            } 
        } 
    </style> 
</head> 
  
<body> 
    <div id="div1"></div> 
    <script> 
        var x = document.getElementById("div1"); 
        
        // Code for Chrome, Safari and Opera 
        x.addEventListener( 
          "webkitAnimationStart", StartAnimation); 
        
        // Standard syntax 
        x.addEventListener( 
          "animationstart", StartAnimation); 
  
        
        // Return animation name 
        function StartAnimation(event) { 
            this.innerHTML = 
              "The animation-name is:" 
            + event.animationName; 
        } 
    </script> 
</body> 
  
</html> 

Output:

elapsedTime: The elapsedTime property returns the number of seconds for which an animation has been running in an animation event.

Syntax:

event.elapsedTime;

Return Type: It returns a number which represents the number of seconds for which an animation has been running.

Example-2:

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        div { 
            width: 50px; 
            height: 50px; 
            background: green; 
            position: relative; 
            /* Chrome, Safari, Opera */ 
           -webkit-animation: animate 4s infinite; 
            animation: animate 4s infinite; 
        } 
        /* Chrome, Safari, Opera */ 
          
        @-webkit-keyframes animate { 
            from { 
                left: 500px; 
            } 
            to { 
                left: 0px; 
            } 
        } 
          
        @keyframes animate { 
            from { 
                left: 500px; 
            } 
            to { 
                left: 0px; 
            } 
        } 
    </style> 
</head> 
  
<body> 
    <div id="div1"></div> 
    
    <script> 
        var x = document.getElementById("div1"); 
        
        // Code for Chrome, Safari and Opera 
        x.addEventListener( 
       "webkitAnimationIteration", RepeatAnimation); 
        
        // Standard syntax 
        x.addEventListener( 
        "animationiteration", RepeatAnimation); 
  
        function RepeatAnimation(event) { 
  
            this.style.backgroundColor =  
              "lightgreen"; 
            this.innerHTML = "Elapsed time: " 
            + event.elapsedTime + " seconds"; 
        } 
    </script> 
</body> 
  
</html> 