animationiteration
Event
Example
Add an event listener to a <div> element when the CSS animation restarts:
Definition and Usage
The animationiteration
event is triggered when a CSS animation restarts.
If the CSS animation-iteration-count
property is set to "1", the animation will play only once, and the animationiteration
event will not be triggered again.
For more information about CSS animations, see our CSS3 Animations section.
During the playback of a CSS animation, the following three events occur:
animationstart
- Triggered after the CSS animation startsanimationiteration
- Triggered when the CSS animation repeatsanimationend
- Triggered when the CSS animation completes
Browser Support
The numbers in the table specify the first browser version that supports the event.
"webkit" or "moz" followed by the number indicates the first version with prefix support.
Event | |||||
---|---|---|---|---|---|
animationiteration | 4.0 webkit | 10.0 | 16.0 <br>5.0 moz | 4.0 webkit | 15.0 webkit <br>12.1 |
Note: Chrome, Safari, and Opera use the webkitAnimationEnd
prefix.
Syntax
Note: Internet Explorer 8 and earlier versions do not support the addEventListener()
method.
Bubbles: | Yes |
---|---|
Cancelable: | No |
--- | --- |
Event Type: | AnimationEvent |
--- | --- |
Related Pages
CSS Tutorial: CSS3 Animations
CSS Reference: CSS3 Animation Properties
CSS Reference: CSS3 animation-iteration-count Property
HTML DOM Reference: Style Animation Property