Latest web development tutorials
 

animationiteration Event

< Event Object

Example

Do something with a <div> element when a CSS animation is repeated:

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

// Code for Chrome, Safari and Opera
x.addEventListener("webkitAnimationIteration", myRepeatFunction);

// Standard syntax
x.addEventListener("animationiteration", myRepeatFunction);
Try it Yourself »

Definition and Usage

The animationiteration event occurs when a CSS animation is repeated.

If the CSS animation-iteration-count property is set to "1", meaning that the animation will only be played one time, the animationiteration event does not occur. The animation needs to run more than once for this event to fire.

For more information about CSS Animations, see our tutorial on CSS3 Animations.

When a CSS animation plays, there are three events that can occur:

  • animationstart - occurs when the CSS animation has started
  • animationiteration - occurs when the CSS animation is repeated
  • animationend - occurs when the CSS animation has completed

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
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 the webkitAnimationIteration prefix.


Syntax

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

Note: The addEventListener() method is not supported in Internet Explorer 8 and earlier versions.


Technical Details

Bubbles: Yes
Cancelable: No
Event type: AnimationEvent
DOM Version: Level 3 Events

Related Pages

CSS Tutorial: CSS3 Animations

CSS Reference: CSS3 animation Property

CSS Reference: CSS3 animation-iteration-count Property

HTML DOM reference: Style animation Property


< Event Object