Skip to content
Related Articles

Related Articles

HTML | DOM AnimationEvent
  • Last Updated : 28 Jan, 2019
GeeksforGeeks - Summer Carnival Banner

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

Supported Browsers:

  • Google Chrome
  • Mozilla Firefox
  • Edge
  • Safari
  • Opera

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :