Open In App

HTML DOM animationstart Event

Improve
Improve
Like Article
Like
Save
Share
Report

The animationstart event occurs when a CSS animation has started to play. 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("webkitAnimationStart", myScript);
  • Standard syntax:
object.addEventListener("animationstart", myScript);

Example: In this example, we will see the use of DOM animationstart 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>
    <center>
        <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 1";
 
                // Standard syntax
                x.style.animation =
                  "mymove 4s 1";
            }
 
            // Code for Chrome, Safari and Opera
            x.addEventListener(
              "webkitAnimationStart", StartFun);
 
            // Standard syntax
            x.addEventListener(
              "animationstart", StartFun);
 
            function StartFun() {
                this.innerHTML =
                  "The animation has started";
                this.style.backgroundColor =
                  "lime";
            }
        </script>
    </center>
</body>
 
</html>


Output: 

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

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Apple Safari
  • Opera


Last Updated : 20 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads