animationiteration Event

Example

Do something when a CSS animation is repeated:

const div1 = document.getElementById("myDIV");

div1.addEventListener("animationiteration", myRepeatFunction);
Try it Yourself »

Description

The animationiteration event occurs when a CSS animation is repeated.

Animation Events

EventOccurs When
animationstartA CSS animation has started
animationendA CSS animation has completed
animationiterationA CSS animation is repeated

Animation Properties

PropertyDescription
animationNameThe name of the animation
elapsedTimeThe number of seconds an animation has been running
pseudoElementThe name of the pseudo-element of the animation

See Also:

The Animation Event Object
The Style animation Property

Tutorial:

CSS3 Animations



Technical Details

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

Browser Support

onanimationiteration is a DOM Level 3 (2004) feature.

It is fully supported in all modern browsers:

Chrome Edge Firefox Safari Opera IE
Yes Yes Yes Yes Yes 11


Copyright 1999-2023 by Refsnes Data. All Rights Reserved.