YouTip LogoYouTip

Event Animationiteration

# animationiteration Event [![Image 3: Event Object Reference](#) Event Object](#) ## Example Add an event listener to a
element when the CSS animation replays: ```javascript var x = document.getElementById("myDIV"); // Chrome, Safari and Opera code x.addEventListener("webkitAnimationIteration", myStartFunction); // Standard syntax x.addEventListener("animationiteration", myStartFunction); [Try it Β»](#) * * * ## Definition and Usage The `animationiteration` event occurs when a CSS animation is replayed. If the CSS (#) property is set to "1", the animation will play only once, and the `animationiteration` event will not trigger. For more about CSS animations, see our (#) chapter. When a CSS animation plays, the following three events occur: - Occurs when a CSS animation has started * `animationiteration` - Occurs when a CSS animation is repeated - Occurs when a CSS animation has completed * * * ## Browser Support The numbers in the table specify the first browser version that fully supports the event. Numbers after "webkit" or "moz" specify the first version with a prefix that supports 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 use the `webkitAnimationIteration` prefix. * * * ## Syntax ```javascript object.addEventListener("webkitAnimationIteration", myScript); // Chrome, Safari and Opera code object.addEventListener("animationiteration", myScript); // Standard syntax **Note:** Internet Explorer 8 and earlier versions do not support the [addEventListener()](#) method. * * * Technical Details | Bubbles: | Yes | | --- | | Cancelable: | No | | Event type: | AnimationEvent | * * * ## Related Pages CSS Tutorial: (#) CSS Reference: (#) CSS Reference: (#) HTML DOM Reference: (#) [![I
← Angularjs ModelEvent Onpause β†’