Element: animationiteration event

The animationiteration event is fired when an iteration of a CSS Animation ends. This event does not occur for animations with an animation-iteration-count of one.

Bubbles Yes
Cancelable No
Interface AnimationEvent
Event handler property onanimationiteration

Examples

This code uses animationiteration to keep track of the number of iterations an animation has completed:

const animated = document.querySelector('.animated');

let iterationCount = 0;

animated.addEventListener('animationiteration', () => {
  iterationCount++;
  console.log(`Animation iteration count: ${iterationCount}`);
});

The same, but using the onanimationiteration event handler property:

const animated = document.querySelector('.animated');

let iterationCount = 0;

animated.onanimationiteration = () => {
  iterationCount++;
  console.log(`Animation iteration count: ${iterationCount}`);
};

Specifications

Specification Status Comment
CSS Animations Working Draft Initial definition

Browser compatibility

No compatibility data found. Please contribute data for "api.Element.animationiteration_event" (depth: 1) to the MDN compatibility data repository.

See also

Document Tags and Contributors

Last updated by: wbamberg,