animationiteration event

Examples

When CSS animation replay element is added as a <div> listens for events:

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

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

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

try it"

Definition and Usage

animationiteration event triggered when the CSS animation replay.

If the CSS Animation-Iteration-COUNT attribute is set to "1", the animation will play only once, animationiteration event is no longer triggered.

More about CSS animation, please see our CSS3 animation section.

CSS animation plays, the following three events occur:

animationstart - after the start of the CSS animation trigger
animationiteration - CSS animations triggered repeat
the animationEnd - after completion trigger the CSS

Browser Support

Figures in the table represent the first browser to support this version of events.

"Webkit" or "moz" after a specified number prefix number as the first version to support 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 webkitAnimationEnd prefix.

grammar

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

Note: Internet Explorer 8 and earlier versions of IE do not support addEventListener () method.

technical details