animationend Event

DOM Events AnimationEvent

Definition and Usage

The animationend event occurs when the CSS animation completes.

For more knowledge on CSS animations, please study our CSS3 Animation Tutorial.

Three events may occur when the CSS animation plays:

Example

Do something to the <div> element when the CSS animation ends:

var x = document.getElementById("myDIV");
// Code for Chrome, Safari, and Opera
x.addEventListener("webkitAnimationEnd", myEndFunction);
// Standard Syntax
x.addEventListener("animationend", myEndFunction);

Try It Yourself

Syntax

object.addEventListener("webkitAnimationEnd", myScript);  // Code for Chrome, Safari, and Opera
object.addEventListener("animationend", myScript);        // Standard Syntax

Note:Internet Explorer 8 and earlier versions do not support addEventListener() Method.

Technical Details

Bubble: Supported
Cancelable: Not Supported
Event Type: AnimationEvent
DOM Version: Level 3 Events

Browser Support

The numbers in the table indicate the first browser version that fully supports the event.

The numbers following "webkit" or "moz" indicate the first version of the prefix used.

Event Chrome IE Firefox Safari Opera
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 webkitAnimationEnd.

Related Pages

CSS Tutorial:CSS3 Animation

CSS Reference Manual:CSS3 animation Property

HTML DOM Reference Manual:Style animation Property

DOM Events AnimationEvent