animationiteration Event

DOM Event AnimationEvent

Definition and Usage

The animationiteration event occurs when the CSS animation repeats.

If CSS animation-iteration-count PropertySet to "1" means the animation will play only once, and the animationiteration event will not occur. The animation needs to run multiple times to trigger this event.

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

Three events may occur when the CSS animation is playing:

Example

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

var x = document.getElementById("myDIV");
// Code for Chrome, Safari, and Opera
x.addEventListener("webkitAnimationIteration", myRepeatFunction);
// Standard Syntax
x.addEventListener("animationiteration", myRepeatFunction);

Try It Yourself

Syntax

object.addEventListener("webkitAnimationIteration", myScript);  // Code for Chrome, Safari, and Opera
object.addEventListener("animationiteration", 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
animationiteration 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

CSS Reference Manual:CSS3 animation-iteration-count Property

HTML DOM Reference Manual:Style animation Property

DOM Event AnimationEvent