Do something with a <div> element when a CSS animation has ended:
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:
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.
Note: The addEventListener() method is not supported in Internet Explorer 8 and earlier versions.
Bubbles: | Yes |
---|---|
Cancelable: | No |
Event type: | AnimationEvent |
DOM Version: | Level 3 Events |
CSS Tutorial: CSS3 Animations
CSS Reference: CSS3 animation Property
HTML DOM reference: Style animation Property