JavaScript Element animationiteration Event

Beginner
5 min read
Updated: Nov 2026
3 examples
Event
Decorative image with the word ANIMATIONITERATION

Definition

In JavaScript, the animationiteration event fires when one iteration of a CSS Animation ends and another begins (MDN). It does not fire with animationend, and it does not fire when animation-iteration-count is 1.

Register a listener with addEventListener. Check readiness and browser support before you rely on this event.

Syntax

Listen for animationiteration. Start with this line.

JavaScript
el.addEventListener("animationiteration", fn)
CallWhat it does
el.addEventListener("animationiteration", fn)Primary signature.

Built into the browser. Listen with el.addEventListener("animationiteration", …) — no import required.

Library declarations
JavaScript
el.addEventListener("animationiteration", fn)

Parameters

ParameterDescription
CSS animationRequired. Must actually run keyframes
Iteration count > 1Required. Otherwise no loop boundary

Return Value

Return ValueDescription
*Fires as an Element event (listener receives the Event object).

JavaScript Examples

Example 1 — Count Iterations (MDN)

Track how many loop boundaries have completed.

JavaScript
const animated = document.querySelector(".animated");
let iterationCount = 0;

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

How It Works

  1. Select the animated element. It must run a CSS animation.
  2. Listen for animationiteration. Fires between loops (MDN).
  3. Increment a counter. Each event means one loop just finished.
  4. Expect count − 1 events for a finite count greater than one.

Example 2 — Read AnimationEvent Fields

Log animationName and elapsedTime at each boundary.

JavaScript
const box = document.getElementById("box");

box.addEventListener("animationiteration", (event) => {
  console.log(event.animationName);
  console.log(event.elapsedTime);
});
Try It Yourself

How It Works

  1. Receive an AnimationEvent. Same type as start/end/cancel.
  2. Read animationName. Which @keyframes name fired.
  3. Read elapsedTime. Seconds the animation has been running (MDN).
  4. Filter when needed if an element runs more than one animation.

Example 3 — Count of One Never Fires

MDN: no animationiteration when the count is 1.

JavaScript
const box = document.getElementById("box");
const out = document.getElementById("out");
const lines = [];

box.addEventListener("animationiteration", () => {
  lines.push("animationiteration"); // will not run for count: 1
});
box.addEventListener("animationend", () => {
  lines.push("animationend");
  out.textContent = lines.join("\\n") || "(no events)";
});

// CSS: animation: pulse 0.4s ease-in-out 1;
Try It Yourself

How It Works

  1. Use count 1. Only one cycle — no “next” loop.
  2. Listen for both events. Iteration stays silent.
  3. See animationend only (after animationstart).
  4. Raise the count in Try It Yourself to see iteration events appear.
Compatibility

Browser Support

Element.animationiteration is marked Baseline Widely available on MDN (since December 2019). Logos use the shared browser-image-sprite.png sprite from this project.

✓ Baseline · Widely available

Element animationiteration

Fires between CSS animation iterations — not on the final animationend.

Widely Available
Google Chrome Full support · Desktop & Mobile
Full support
Mozilla Firefox Full support · Desktop & Mobile
Full support
Apple Safari Full support · macOS & iOS
Full support
Microsoft Edge Full support · Chromium
Full support
Opera Full support · Modern versions
Full support
Internet Explorer Legacy with prefixes historically
Partial support
animationiteration Baseline support

Bottom line: Safe for modern browsers. Use animation-iteration-count greater than 1, listen for animationiteration, and use animationend for the final finish. See the MDN Element animationiteration reference.

Frequently Asked Questions

It fires when one iteration of a CSS Animation ends and another iteration begins (MDN). It does not fire at the same time as animationend, and it does not fire for animations whose animation-iteration-count is one.
No. MDN marks Element animationiteration as Baseline Widely available (since December 2019). It is not Deprecated, Experimental, or Non-standard.
An AnimationEvent. Useful read-only properties include animationName, elapsedTime, and pseudoElement.
Use element.addEventListener("animationiteration", handler) or set element.onanimationiteration = handler. Prefer addEventListener when you need multiple handlers or easy removal.
Because there is no next iteration after the only cycle. With animation-iteration-count: 1, you get animationstart and then animationend — no animationiteration in between.
animationiteration marks the boundary between loops while the animation continues. animationend fires once when the entire animation (including the last iteration) has finished.

Next: Element animationstart

Learn when a CSS animation begins and how AnimationEvent reports it.

animationstart tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

JavaScript Element animationend Event JavaScript Element animationstart Event