JavaScript Element animationend Event

What You’ll Learn

The animationend event fires when a CSS Animation completes. Learn addEventListener vs onanimationend, AnimationEvent properties, how it differs from animationcancel, and how to clean up classes after a normal finish—with five examples and try-it labs.

Introduction

When a CSS animation runs all the way through its planned duration and iterations, the browser fires animationend. That is your signal to remove a temporary class, reveal the next UI step, or start another animation.

MDN: if the animation aborts before completion—for example the element is removed from the DOM, or the animation is removed from the element— animationend is not fired. Use animationcancel for those interrupt cases (where supported).

Understanding animationend

An instance event on elements that finish a CSS Animation. It answers: “Did this animation complete normally?”

• Fires when the animation completes (after the last iteration).
• Does not fire if the animation is aborted early.
• AnimationEvent — includes animationName, elapsedTime, pseudoElement.
• Baseline Widely available on MDN (since December 2019).

📝 Syntax

Use the event name with addEventListener, or set the handler property:

addEventListener("animationend", (event) => { });

onanimationend = (event) => { };

Event type

An AnimationEvent (inherits from Event).

Event properties

⚖️ Animation lifecycle events

Examples Gallery

Examples follow MDN Element: animationend event. Try It Yourself labs run a short CSS animation so you can watch animationend fire when it finishes.

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

animated.addEventListener("animationend", () => {
  console.log("Animation ended");
});

// Make sure .animated has a CSS animation that can finish
// (finite duration / iteration-count, not infinite).

Animation ended

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

animated.onanimationend = () => {
  console.log("Animation ended");
};

// Assigning again replaces the previous onanimationend handler.

Animation ended

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

box.addEventListener("animationend", (event) => {
  console.log("ended:", event.animationName);
  console.log("elapsedTime:", event.elapsedTime);
  console.log("pseudoElement:", JSON.stringify(event.pseudoElement));
});

box.classList.add("fade-in");

ended: fade-in
elapsedTime: 0.8
pseudoElement: ""

const box = document.getElementById("box");
const btn = document.getElementById("play");

box.addEventListener("animationend", () => {
  box.classList.remove("bounce");
  console.log("Class removed after animationend");
});

btn.addEventListener("click", () => {
  box.classList.add("bounce");
});

Class removed after animationend

const el = document.querySelector("p.animation");
const log = document.getElementById("log");
const btn = document.getElementById("toggle");
let iterations = 0;

function append(msg) {
  log.textContent += msg + " ";
}

el.addEventListener("animationstart", () => append("start"));
el.addEventListener("animationiteration", () => {
  iterations += 1;
  append("iteration:" + iterations);
});
el.addEventListener("animationend", () => {
  append("end");
  el.classList.remove("active");
  btn.textContent = "Activate animation";
});
el.addEventListener("animationcancel", () => append("canceled"));

btn.addEventListener("click", () => {
  el.classList.toggle("active");
  log.textContent = "";
  iterations = 0;
  const on = el.classList.contains("active");
  btn.textContent = on ? "Cancel animation" : "Activate animation";
});

start iteration:1 end

🚀 Common Use Cases

• Removing temporary entrance/exit animation classes after they finish.
• Chaining UI steps: show the next panel only after the current animation ends.
• Syncing analytics or sound cues with completed motion.
• Teaching the CSS animation event set alongside animationstart and animationcancel.
• Resetting buttons or loaders when a one-shot animation completes.

🔧 How It Works

📝 Notes

• MDN: Baseline Widely available (since December 2019).
• Not Deprecated, Experimental, or Non-standard — no status banner required.
• Aborted animations do not fire animationend; pair with animationcancel when needed.
• Infinite animations never fire animationend while they keep looping.
• Related learning: animationcancel, addEventListener(), animate(), JavaScript hub.

💡 Best Practices