animationiterationEvent

Example

Add a listener event to the <div> element when the CSS animation replays:

var x = document.getElementById("myDIV");

// Chrome, Safari and Opera code
x.addEventListener("webkitAnimationIteration", myStartFunction);

// Standard syntax
x.addEventListener("animationiteration", myStartFunction);

Try it Yourself »

Definition and Usage

The animationiteration event is triggered when a CSS animation is replayed.

If the CSSanimation-iteration-countattribute is set to "1", the animation will only play once, and the animationiteration event will no longer be triggered.

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 a CSS animation replays repeatedly
animationend- Fired after the CSS animation completes

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 prefix that supports the event.

Event
animationiteration	4.0 webkit	10.0	16.0 5.0 moz	4.0 webkit	15.0 webkit 12.1

Note:Chrome, Safari, and Opera browsers use the webkitAnimationEnd prefix.

Syntax

object.addEventListener("webkitAnimationIteration", myScript); // Chrome, Safari and Opera code
object.addEventListener("animationiteration", myScript); // Standard syntax

Note:Internet Explorer 8 and earlier IE versions do not supportaddEventListener()method.

Technical Details