animationend event
Examples
After CSS animation element is added to the end of the <div> listens for events:
var x = document.getElementById ( "myDIV");
// Chrome, Safari and Opera Codes
x.addEventListener ( "webkitAnimationEnd", myStartFunction);
// Standard syntax
x.addEventListener ( "animationend", myStartFunction);
// Chrome, Safari and Opera Codes
x.addEventListener ( "webkitAnimationEnd", myStartFunction);
// Standard syntax
x.addEventListener ( "animationend", myStartFunction);
try it"
Definition and Usage
animationend event is triggered after CSS animation is complete.
More about CSS animation, please see our CSS3 animation section.
CSS animation plays, the following three events occur:
- animationstart - after the start of the CSS animation trigger
- animationiteration - the CSS animations triggered repeat
- animationend - CSS triggered after completion
Browser Support
Figures in the table represent the first browser to support this version of events.
"Webkit" or "moz" after a specified number prefix number as the first version to support the event.
| event | |||||
|---|---|---|---|---|---|
| animationend | 4.0 webkit | 10.0 | 16.0 5.0 moz | 4.0 webkit | 15.0 webkit 12.1 |
Note: Chrome, Safari and Opera browsers webkitAnimationEnd prefix.
grammar
object.addEventListener ( "webkitAnimationEnd", myScript) ; // Chrome, Safari and Opera
object .addEventListener ( "animationend", myScript ); // standard syntax
object .addEventListener ( "animationend", myScript ); // standard syntax
Note: Internet Explorer 8 and earlier versions of IE do not support addEventListener () method.
technical details
| Whether to support the bubble: | Yes |
|---|---|
| It can be canceled: | No |
| Event Type: | AnimationEvent |
Related Pages
CSS tutorial: CSS3 Animation
CSS Reference: CSS3 animation properties
HTML DOM Reference: Style animation properties
Event objects