animationiteration event
Examples
When CSS animation replay element is added as a <div> listens for events:
// 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 ( "animationiteration", myScript ); // standard syntax
Note: Internet Explorer 8 and earlier versions of IE do not support addEventListener () method.
technical details
Whether to support the bubble: | Yes |
---|---|
It can be canceled: | No |
Event Type: | AnimationEvent |
Related Pages
CSS tutorial: CSS3 Animation
CSS Reference: CSS3 animation properties
CSS Reference: CSS3 Animation-Iteration-COUNT property
HTML DOM Reference: Style animation properties
Event objects