Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

HTML | DOM animationend Event

  • Last Updated : 23 Jul, 2019

The animationend event occurs on the completion of CSS animation.

Events that occur When a CSS animation plays:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

  • animationstart: It occurs when the CSS animation has started to play.
  • animationiteration: It occurs when the CSS animation is repeated.
  • animationend: It occurs when the CSS animation has completed.

Syntax:

  • Code for Chrome, Safari and Opera
    object.addEventListener("webkitAnimationEnd", myScript);
  • Standard syntax:
    object.addEventListener("animationend", myScript);

Example:




<!DOCTYPE html>
<html>
  
<head>
    <style>
        #div {
            width: 100%;
            height: 100px;
            background: green;
            position: relative;
            font-size: 40px;
        }
  
        /* Chrome, Safari, Opera */
        @-webkit-keyframes mymove {
            from {
                top: 0px;
            }
            to {
                top: 200px;
            }
        }
          
        @keyframes mymove {
            from {
                top: 0px;
            }
            to {
                top: 200px;
            }
        }
    </style>
</head>
  
<body>
    <center>
        <h1 style="color:green">GeeksforGeeks</h1>
  
        <div id="div" onclick="GFGFun()">
            Click me to start the animation.
        </div>
  
        <script>
            var x = document.getElementById("div");
  
            // Start the animation with JavaScript
            function GFGFun() {
  
                // Code for Chrome, Safari and Opera
                x.style.WebkitAnimation = "mymove 4s 1";
  
                // Standard syntax
                x.style.animation = "mymove 4s 1";
            }
  
            // Code for Chrome, Safari and Opera
            x.addEventListener("webkitAnimationStart", StartFun);
            x.addEventListener("webkitAnimationEnd", EndFun);
  
            // Standard syntax
            x.addEventListener("animationstart", StartFun);
            x.addEventListener("animationend", EndFun);
  
            function StartFun() {
                this.innerHTML = "The animation has started";
                this.style.backgroundColor = "lime";
            }
  
            function EndFun() {
                this.innerHTML = "The animation has completed";
                this.style.backgroundColor = "lightgray";
            }
        </script>
    </center>
</body>
  
</html>

Output:

Supported Browsers: The browsers supported by animationend Event are listed below:

  • Google Chrome 4.0 webkit
  • Internet Explorer 10.0
  • Firefox 16.0, 5.0 moz
  • Apple Safari 4.0 webkit
  • Opera 15.0 webkit, 12.1



My Personal Notes arrow_drop_up
Recommended Articles
Page :