animationend Event
Example
Do something when a CSS animation has ended:
const div1 = document.getElementById("myDIV");
div1.addEventListener("animationend", myEndFunction);
Try it Yourself »
Description
The animationend
event occurs when a CSS animation has completed.
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
onanimationend
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 |