HTML DOM animationiteration Event

Last Updated : 20 Jun, 2023

The animationiteration event occurs when a CSS animation is repeated. The animation will only be played one-time if the CSS animation-iteration-count property is set to “1”. The animation needs to run more than once for this event to fire. Events that can occur when a CSS animation plays:

animationstart: occurs when the CSS animation has started.
animationiteration: occurs when the CSS animation is repeated.
animationend: occurs when the CSS animation has been completed.

Syntax:

Code for Chrome, Safari and Opera

object.addEventListener("webkitAnimationIteration", myScript);

Standard syntax:

object.addEventListener("animationiteration", myScript);

Example: In this example, we will see the use of DOM animationiteration Event

HTML

<!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>
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    <div id="div" onclick="GFGFun()">
        Click me to start the animation.
    </div>
 
    <script>
        let x = document.getElementById("div");
 
        // Start the animation with JavaScript
        function GFGFun() {
            // Code for Chrome, Safari and Opera
            x.style.WebkitAnimation = 
              "mymove 4s 2";
            // Standard syntax
            x.style.animation = 
              "mymove 4s 2";
        }
 
        // Code for Chrome, Safari and Opera
        x.addEventListener(
          "webkitAnimationStart", StartFun);
        x.addEventListener(
          "webkitAnimationIteration", RepeatFun);
 
        // Standard syntax
        x.addEventListener(
          "animationstart", StartFun);
        x.addEventListener(
          "animationiteration", RepeatFun);
 
        function StartFun() {
            this.innerHTML = 
              "The animation has started";
            this.style.backgroundColor = 
              "lime";
        }
 
        function RepeatFun() {
            this.innerHTML = 
              "Animation was played again";
            this.style.backgroundColor = 
              "darkgreen";
        }
    </script>
</body>
 
</html>