Open In App

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy

HTML | DOM AnimationEvent

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.

  1. 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:
    

    2. 

  2. 
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> 

    

    
    		

    

    

    

    

    

    

    
                        

    

    

    
                        

    

    

    

    Output:
    

    3. 



Supported Browsers:


	

        Article Tags : 
        

            HTML
Web Technologies