animationendEvent

Examples

Add an event listener to the <div> 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 Yourself »

Definition and Usage

The animationend event fires when a CSS animation has completed.

For more on CSS animations, see ourCSS3 Animationschapter.

When a CSS animation plays, the following three events occur:

animationstart- Fired after the CSS animation starts
animationiteration- Fired when the CSS animation repeats
animationend - Fired after the CSS animation completes

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: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 IE versions do not supportaddEventListener()the method.

Technical Details