JavaScript Element animationcancel Event

What You’ll Learn

The animationcancel event fires when a CSS Animation aborts instead of finishing with animationend. Learn addEventListener vs onanimationcancel, AnimationEvent properties, common cancel triggers (hide element, change animation-name), and why MDN marks this event Limited availability.

Introduction

CSS animations usually end with animationend. Sometimes they stop unexpectedly—for example you hide the element with display: none, or you change animation-name so the running animation is removed. In those cases the browser should fire animationcancel instead of animationend.

That makes animationcancel useful for cleanup: release state, reset UI labels, or log that the animation did not finish normally.

Understanding animationcancel

An instance event on elements that participate in CSS Animations. MDN: it fires when a CSS Animation unexpectedly aborts—any time it stops without sending animationend.

• Aborts when the animation is removed or the node is hidden (directly or via an ancestor).
• AnimationEvent — includes animationName, elapsedTime, pseudoElement.
• Not the normal “animation finished” signal—that is animationend.
• Limited availability — not Baseline; verify on your target browsers.

📝 Syntax

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

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

onanimationcancel = (event) => { };

Event type

An AnimationEvent (inherits from Event).

Event properties

⚖️ Animation lifecycle events

⚠️ Limited Availability (Not Baseline)

MDN labels animationcancel as Limited availability: it is not Baseline because support is incomplete in some widely used browsers. Prefer addEventListener over onanimationcancel for broader coverage.

It is still a standard CSS Animations event—not Deprecated, Experimental, or Non-standard. Always test cancel paths (hide, remove class, change animation-name) on your supported browsers.

Examples Gallery

Examples follow MDN Element: animationcancel event. Try It Yourself labs start a short CSS animation, then cancel it so you can see the event fire.

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

animated.addEventListener("animationcancel", () => {
  console.log("Animation canceled");
});

// Abort the running CSS animation (where supported):
animated.style.display = "none";

Animation canceled

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

animated.onanimationcancel = () => {
  console.log("Animation canceled");
};

animated.style.display = "none";

// Tip: prefer addEventListener when onanimationcancel is missing.

Animation canceled

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

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

// Start animation via CSS class, then abort after a moment:
box.classList.add("spin");
setTimeout(() => {
  box.style.display = "none";
}, 200);

canceled: spin
elapsedTime: 0.2
pseudoElement: ""

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

box.addEventListener("animationcancel", () => {
  console.log("Animation canceled (name removed)");
});

box.classList.add("slide");
setTimeout(() => {
  // Removing the class clears animation-name → abort (where supported)
  box.classList.remove("slide");
}, 150);

Animation canceled (name removed)

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 canceled

🚀 Common Use Cases

• Cleaning up UI state when a panel is hidden mid-animation.
• Distinguishing “finished” vs “interrupted” animation analytics.
• Resetting loading indicators if a route change aborts an entrance animation.
• Teaching the full CSS animation event set alongside animationend.
• Coordinating class toggles that both start and stop named animations.

🔧 How It Works

📝 Notes

• MDN: Limited availability (not Baseline)—verify cancel behavior on target browsers.
• Not Deprecated, Experimental, or Non-standard — no status banner required.
• Prefer addEventListener over onanimationcancel for compatibility.
• Hiding via an ancestor can also cancel animations on descendants.
• Related learning: afterscriptexecute, addEventListener(), animate(), JavaScript hub.

💡 Best Practices