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 |
Copyright 1999-2023 by Refsnes Data. All Rights Reserved.