animationstart Event
Example
Do something when a CSS animation starts:
const div1 = document.getElementById("myDIV");
div1.addEventListener("animationstart", myStartFunction);
Try it Yourself »
Description
The animationstart event occurs when a CSS animation starts.
Animation Events
| Event | Occurs When |
|---|---|
| animationstart | A CSS animation has started |
| animationend | A CSS animation has completed |
| animationiteration | A CSS animation is repeated |
Animation Properties
| Property | Description |
|---|---|
| animationName | The name of the animation |
| elapsedTime | The number of seconds an animation has been running |
| pseudoElement | The name of the pseudo-element of the animation |
See Also:
The Animation Event Object
The Style animation Property
Tutorial:
Technical Details
| Bubbles: | Yes |
|---|---|
| Cancelable: | No |
| Event type: | AnimationEvent |
| DOM Version: | Level 3 Events |
Browser Support
onanimationstart is a DOM Level 3 (2004) feature.
It is fully supported in all modern browsers:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Yes | Yes | Yes | Yes | Yes | 11 |
