YouTip

element after the CSS animation ends: var x = document.getElementById("myDIV"); // Chrome, Safari and Opera code x.addEventListener("webkitAnimationEnd", myStartFunction); // Standard syntax x.addEventListener("animationend", myStartFunction); [Try it »](#) * * * ## Definition and Usage The animationend event occurs when a CSS animation has completed. For more information about CSS animations, see our (#) chapter. When a CSS animation is played, the following three events occur: - Occurs when a CSS animation has started - Occurs when a CSS animation is repeated * animationend - Occurs when a CSS animation has completed * * * ## Browser Support The numbers in the table specify the first browser version that fully supports the event. The number specified after "webkit" or "moz" is the first version number with a prefix that supports 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 use the webkitAnimationEnd prefix. * * * ## Syntax object.addEventListener("webkitAnimationEnd", _myScript_); // Chrome, Safari and Opera _object_.addEventListener("animationend", _myScript_); // Standard syntax **Note:** Internet Explorer 8 and earlier versions do not support the [addEventListener()](#) method. * * * Technical Details | Bubbles: | Yes | | --- | | Cancelable: | No | | Event type: | AnimationEvent | * * * ## Related Pages CSS Tutorial: (#) CSS Reference: (#) HTML DOM Reference: (#) [ Event Object](#)