Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

HTML | DOM animationstart Event

  • Last Updated : 24 Jul, 2019

The animationstart event occurs when a CSS animation has started to play.

events that can 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: occurs when the CSS animation has started.
  • animationiteration: occurs when the CSS animation is repeated.
  • animationend: occurs when the CSS animation has completed.


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


<!DOCTYPE html>
        #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;
        <h1 style="color:green">
        <div id="div" 
          Click me to start the animation.
            var x = document.getElementById("div");
            // Start the animation with JavaScript
            function GFGFun() {
                // Code for Chrome, Safari and Opera
       = "mymove 4s 1"; 
                // Standard syntax
       = "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";
       = "lime";


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

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

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!