Example
Do something with a <div> element when a CSS animation has ended:
var x = document.getElementById("myDIV");
// Code for Chrome, Safari and Opera
x.addEventListener("webkitAnimationEnd", myEndFunction);
//
Standard syntax
x.addEventListener("animationend", myEndFunction);
Try it Yourself »
Definition and Usage
The animationend event occurs when a CSS animation has completed.
For more information about CSS Animations, see our tutorial on CSS3 Animations.
When a CSS animation plays, there are three events that can occur:
- animationstart - occurs when the CSS animation has started
- animationiteration - occurs when the CSS animation is repeated
- animationend - occurs when the CSS animation has completed
Browser Support
The numbers in the table specify the first browser version that fully supports the event.
Numbers followed by "webkit" or "moz" specify the first version that worked with a prefix.
| Event | |||||
|---|---|---|---|---|---|
| animationend | 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 the webkitAnimationEnd prefix.
Syntax
object.addEventListener("webkitAnimationEnd", myScript);
// Code for Chrome, Safari and Opera
object.addEventListener("animationend", myScript);
// Standard syntax
Note: The addEventListener() method is not supported in Internet Explorer 8 and earlier versions.
Technical Details
| Bubbles: | Yes |
|---|---|
| Cancelable: | No |
| Event type: | AnimationEvent |
| DOM Version: | Level 3 Events |
Related Pages
CSS Tutorial: CSS3 Animations
CSS Reference: CSS3 animation Property
HTML DOM reference: Style animation Property
< Event Object