JavaScript Element animationcancel Event

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

Definition

In JavaScript, the animationcancel event fires when a CSS Animation unexpectedly aborts — any time it stops without sending animationend (MDN). The event object is an AnimationEvent.

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

Syntax

Listen for animationcancel. Start with this line.

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

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

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

Parameters

ParameterDescription
Event targetRequired. Element whose CSS animation aborted
AnimationEventRequired. Carries animationName, elapsedTime, pseudoElement
CSS animationRequired. Must be running when it is aborted
Abort actionRequired. Hide node, clear animation-name, etc.

Return Value

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

JavaScript Examples

Example 1 — Listen for animationcancel

MDN pattern: listen, then hide the element to abort the animation.

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

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

animated.style.display = "none";
Try It Yourself

How It Works

  1. Select the animating element. It must already have a CSS animation running.
  2. Register the listener. Prefer addEventListener("animationcancel", …).
  3. Abort with display: none. Hiding the node stops the animation unexpectedly (MDN).
  4. Handler runs. You get cancel instead of a normal animationend.

Example 2 — Read AnimationEvent Fields

Log animationName and elapsedTime when cancel fires.

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

box.addEventListener("animationcancel", (event) => {
  console.log("name:", event.animationName);
  console.log("elapsed:", event.elapsedTime);
  console.log("pseudo:", event.pseudoElement);
});
Try It Yourself

How It Works

  1. Receive an AnimationEvent. Same type as start / end / iteration.
  2. Read animationName. Matches the CSS animation-name that aborted.
  3. Read elapsedTime. Seconds the animation had been running (excluding pause).
  4. Check pseudoElement. Empty string means the element itself, not a ::pseudo.

Example 3 — Cancel vs animationend

Listen for both; only one path runs for a given animation run.

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

box.addEventListener("animationend", () => {
  console.log("finished (animationend)");
});

box.addEventListener("animationcancel", () => {
  console.log("aborted (animationcancel)");
});
Try It Yourself

How It Works

  1. Attach both listeners. Finish and abort are separate outcomes.
  2. Finish path. Let the animation complete → only animationend.
  3. Abort path. Hide or remove the animation → only animationcancel.
  4. MDN rule. Unexpected abort means no animationend for that run.
Compatibility

Browser Support

Element animationcancel is a standard CSS Animations event. MDN marks it Limited availability (not Baseline) — support varies across widely used browsers.

✓ Limited availability

Element animationcancel

Fires when a CSS animation aborts without animationend — pair with animationend for full lifecycle cleanup.

Varies Not Baseline
Google Chrome Supported · Desktop & Mobile
Full support
Mozilla Firefox Supported · Desktop & Mobile
Full support
Apple Safari Supported · macOS & iOS
Full support
Microsoft Edge Supported · Chromium
Full support
Internet Explorer No native support · Use a polyfill
Polyfill
Opera Supported · Modern versions
Full support
Samsung Internet Supported · Android
Full support
Android WebView Supported · Modern WebView
Full support
animationcancel Feature-detect

Bottom line: Always feature-detect. Prefer addEventListener. Use animationend for normal finish and animationcancel for unexpected aborts.

Frequently Asked Questions

It fires when a CSS Animation unexpectedly aborts — any time it stops without sending animationend (MDN). Common causes: changing animation-name so the animation is removed, or hiding the element (or an ancestor) with CSS such as display: none.
No. MDN does not mark it Deprecated, Experimental, or Non-standard. It is Limited availability (not Baseline) because support is missing or incomplete in some widely used browsers.
An AnimationEvent. Useful read-only properties include animationName, elapsedTime, and pseudoElement.
Prefer element.addEventListener("animationcancel", handler). You can also set onanimationcancel. Prefer addEventListener for broader reliability.
animationend fires when an animation finishes its intended run. animationcancel fires when the animation is aborted early and never reaches a normal end — then animationend does not fire for that run.
Yes in supporting browsers: setting display: none on the animating element (or a containing node that hides it) can abort the animation and fire animationcancel (MDN).

Next: animationend

Learn when a CSS animation finishes its intended run.

animationend 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)

10 people found this page helpful

JavaScript Element afterscriptexecute Event JavaScript Element animationend Event