animationstart Event

DOM Events AnimationEvent

Definition and Usage

The animationstart event occurs when the CSS animation starts playing.

For more knowledge on CSS animations, please study our CSS3 Animation Tutorial.

Three events may occur when the CSS animation plays:

Example

Do something to the <div> element when the CSS animation starts:

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

Try It Yourself

Syntax

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

Note:Internet Explorer 8 and earlier versions do not support addEventListener() Method.

Technical Details

Bubble: Supported
Cancelable: Not Supported
Event Type: AnimationEvent
DOM Version: Level 3 Events

Browser Support

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

The 'webkit' or 'moz' after the number indicates the first version with the prefix used.

Event Chrome IE Firefox Safari Opera
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 webkitAnimationEnd.

Related Pages

CSS Tutorial:CSS3 Animation

CSS Reference Manual:CSS3 animation Property

HTML DOM Reference Manual:Style animation Property

DOM Events AnimationEvent