animationstartEvent

Example

Add an event listener to the <div> element when the CSS animation starts playing:

var x = document.getElementById("myDIV"); //Chrome, Safari and Opera code x.addEventListener("webkitAnimationStart", myStartFunction); //Standard syntax x.addEventListener("animationstart", myStartFunction);

Try it Yourself »

Definition and Usage

The animationstart event fires when a CSS animation starts playing.

For more information about CSS animations, see ourCSS3 Animationsection.

When a CSS animation plays, the following three events occur:

animationstart - fires after the CSS animation starts
animationiteration- fires when the CSS animation is repeated
animationend- fires after the CSS animation completes

Browser Support

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

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

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

Note:Chrome, Safari and Opera browsers use the webkitAnimationEnd prefix.

Syntax

object.addEventListener("webkitAnimationStart", myScript);  // Chrome, Safari 与 Opera 语法
object.addEventListener("animationstart", myScript);        // 标准语法

Note:Internet Explorer 8 and earlier IE versions do not supportaddEventListener()the method.

Technical Details