References

Beginner-friendly references for web development, with live, editable examples.

The HTML onanimationiteration event

Event All modern browsers Updated
Quick answer

The HTML onanimationiteration attribute runs JavaScript when a CSS animation completes one iteration and starts another. It is an inline handler for the animationiteration event; in modern code prefer addEventListener('animationiteration', …).

Overview

The onanimationiteration event attribute runs JavaScript when one iteration of a CSS animation ends and another begins. In JavaScript the event itself is named animationiteration. Drop the on prefix when you call addEventListener.

It is a CSS animation event. The handler receives an AnimationEvent with the animationName and elapsedTime, letting you run code at specific points in a CSS animation defined with @keyframes.

You can wire this up with the inline onanimationiteration HTML attribute, but the modern, recommended approach is element.addEventListener('animationiteration', handler) in JavaScript. That keeps behavior out of your markup, lets you attach several handlers to the same event, and makes them easy to remove. The inline attribute is fine for quick demos.

Syntax

<element onanimationiteration="handler()">…</element>

element.addEventListener('animationiteration', handler);

Best practices

  • Prefer element.addEventListener('animationiteration', handler) over the inline onanimationiteration attribute; it separates behavior from markup and allows multiple handlers.
  • Use it to run JavaScript at a precise point in a CSS animation without a timer.
  • Check event.animationName when an element has more than one animation.
  • Respect prefers-reduced-motion for the animations these events track.

Frequently asked questions

What is the onanimationiteration event?
It runs JavaScript when one iteration of a CSS animation ends and another begins. In JavaScript the event is named animationiteration.
Does animationiteration fire after the last iteration?
No. The end of the final iteration fires animationend instead, so an animation with animation-iteration-count: 1 never fires animationiteration.
How do I know which animation triggered the event?
Read event.animationName from the AnimationEvent.
Should I use the onanimationiteration attribute or addEventListener?
Prefer element.addEventListener('animationiteration', …) in JavaScript. The inline onanimationiteration attribute works but mixes behavior into the markup and allows only one handler per element.
onanimationend onanimationstart