animationstart event

The animationstart event occurs at the beginning of the animation, accounting for any animation delay (as specified by the animation-delay property), if necessary. A negative delay causes the event to fire with an elapsed time equal to the absolute value of the delay.

Syntax

addEventListener Method	object.addEventListener("animationstart", handler, useCapture)

Event information

Synchronous	No
Bubbles	Yes
Cancelable	Yes

Event handler parameters

handler [in]

Type: function

Event handler object.

Standards information

CSS Animations Module Level 3

Remarks

These events were introduced in Internet Explorer 10.

As of Internet Explorer for Windows Phone 8.1 Update, Internet Explorer for Windows Phone supports "webkitAnimationStart" as an alias for this property.

Examples

This example animates a <div> element, and fires the animationstart, animationend, and animationiteration events to change the text in the box. Try the example online.

HTML


<!DOCTYPE html>
<html lang="en-us">
<head>
  <title>CSS Animation Events Example</title>
<style>
  body {
    padding:10px;
    font-family:"Segoe UI";
  }
  div {
    width:250px; 
    background-color:lime;
    padding:10px;
    font-weight:bold;
    font-size:20pt;
  }
  div:active {
    animation-delay: 0s;
    animation-duration: 3s;
    animation-iteration-count: 2;
    animation-name: demo;
  }
  @keyframes demo {
    from {
    animation-timing-function: ease;
    }
    50% {
      background-color: purple;
      animation-timing-function: ease-in;
      transform: translate(20px,30px);
    }
    to {
      background-color: blue;
    }
  }
</style>
</head>
<body>
  <h1>CSS Animation Events Example</h1>
    <p>Click and hold to start the animation. Internet Explorer 10 or later required.</p>
    <div id="mydiv">
      Duis ac leo sit amet lectus tristique pulvinar nec rutrum dolor. Etiam sed ipsum enim, vitae euismod odio. Suspendisse eu.
    </div>

    <script>
      var divObj = document.getElementById("mydiv");
      divObj.addEventListener("animationstart", function (
      ) {
       this.innerHTML = "This is the animation start event";
      }, false);

      divObj.addEventListener("animationend", function () {
        this.innerHTML = "This is the animation end event";
      }, false);

      divObj.addEventListener("animationiteration", function () {
        this.innerHTML = "This is the animation iteration event";
      }, false);

    </script>


</body>
</html>