animationstart Event

Example

Do something with a <div> element when a CSS animation has started:

var x = document.getElementById("myDIV");

// Code for Chrome, Safari and Opera
x.addEventListener("webkitAnimationStart", myStartFunction);

// Standard syntax
x.addEventListener("animationstart", myStartFunction);

Try it Yourself »

Definition and Usage

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

For more information about CSS Animations, see our tutorial on CSS3 Animations.

When a CSS animation plays, there are three events that can occur:

animationstart - occurs when the CSS animation has started
animationiteration - occurs when the CSS animation is repeated
animationend - occurs when the CSS animation has completed

Browser Support

The numbers in the table specify the first browser version that fully supports the event.

Numbers followed by "webkit" or "moz" specify the first version that worked with a prefix.

Event
animationstart	4.0 webkit	10.0	16.0 5.0 moz	4.0 webkit	15.0 webkit 12.1

Note: For Chrome, Safari and Opera, use the webkitAnimationStart prefix.

Syntax

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

Note: The addEventListener() method is not supported in Internet Explorer 8 and earlier versions.