The animationstart event
May 06, 2021 JavaScript with HTML DOM Reference book
Table of contents
The animationstart event
Add a listening event to the element when the CSS animation starts playing:
Chrome, Safari and Opera codes
x.addEventListener("webkitAnimationStart", myStartFunction);
Standard syntax
x.addEventListener("animationstart", myStartFunction);
Try it out . . .
Definitions and usages
The animationstart event is triggered when the CSS animation starts playing.
For more information on CSS animations, check out our CSS3 Animations section.
When a CSS animation plays, three events occur:
- Animationstart - CSS animation is triggered after it starts
- Animationiteration - Triggered when the CSS animation plays repeatedly
- Animationend - Triggered when the CSS animation is complete
Browser support
The numbers in the table support the version number of the first browser for the event.
The number specified after "webkit" or "moz" is the prefix for the first version number that supports the event.
| 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.
Grammar
object .addEventListener("animationstart", myScript ); S tandard syntax
Note: The addEventListener() method is not supported in Internet Explorer 8 and earlier versions of IE.
Technical details
| Whether to support bubbling: | Yes |
|---|---|
| Can I cancel: | No |
| Types of events: | AnimationEvent |
Related pages
CSS tutorial: CSS3 animation
CSS Reference Manual: CSS3 Animation Properties
HTML DOM Reference Manual: Style Animation Properties
The event object