JavaScript Element transitioncancel Event

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

Definition

In JavaScript, the transitioncancel event fires when a CSS transition is canceled (MDN)—after transitionrun and before a normal transitionend. The event object is a TransitionEvent. If transitioncancel fires, transitionend will not fire for that transition.

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

Syntax

Listen for transitioncancel. Start with this line.

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

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

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

Parameters

ParameterDescription
Event targetRequired. Element whose CSS transition was canceled
TransitionEventRequired. Carries propertyName, elapsedTime, pseudoElement
Non-zero transitionRequired. If duration and delay are both 0, no transition events fire

Return Value

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

JavaScript Examples

Example 1 — Listen for transitioncancel

Log a message when a CSS transition is aborted.

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

box.addEventListener("transitioncancel", () => {
  out.textContent = "transitioncancel fired";
});
Try It Yourself

How It Works

  1. Pick the element. The node that will run a CSS transition.
  2. Register the listener. transitioncancel runs when that transition is aborted.
  3. Show feedback. Update status text so students see the cancel.
  4. Trigger cancel in the lab. Start a long transition, then reverse it before it ends.

Example 2 — Read TransitionEvent Fields

Print propertyName and elapsedTime when cancel fires.

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

box.addEventListener("transitioncancel", (event) => {
  out.textContent =
    "canceled " + event.propertyName +
    " after " + event.elapsedTime.toFixed(2) + "s";
});
Try It Yourself

How It Works

  1. Receive a TransitionEvent. Cancel carries the same event type as other transition events.
  2. Read the property. propertyName is the CSS property that was transitioning (for example opacity).
  3. Read elapsed time. elapsedTime is how many seconds ran before the abort.
  4. Use it for cleanup. Know which property stopped so you can reset UI state.

Example 3 — Cancel vs End

Listen for both; only one path runs for a given transition.

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

box.addEventListener("transitioncancel", () => {
  out.textContent = "canceled (no transitionend)";
});

box.addEventListener("transitionend", () => {
  out.textContent = "finished (transitionend)";
});
Try It Yourself

How It Works

  1. Attach both listeners. Cancel and end are separate outcomes.
  2. Abort path. Reverse the transition early → only transitioncancel runs.
  3. Finish path. Let it complete → only transitionend runs.
  4. MDN rule. If cancel fires, end will not fire for that transition.
Compatibility

Browser Support

transitioncancel is Baseline Widely available on MDN (across browsers since November 2020). It is a standard CSS Transitions event, not Deprecated or Experimental.

✓ Baseline · Widely available

Element transitioncancel

Fires when a CSS transition is canceled. Supported in modern Chrome, Firefox, Safari, and Edge.

95% Modern browser support
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
transitioncancel Excellent

Bottom line: Safe to use in modern web apps. Pair with transitionend when you need both abort and finish paths.

Frequently Asked Questions

It fires when a CSS transition is canceled—after transitionrun has occurred and before a normal transitionend (MDN). Common causes include reversing a hover early or removing the class that drove the change.
No. MDN does not mark Element transitioncancel as Deprecated, Experimental, or Non-standard. It is Baseline Widely available (across browsers since November 2020).
A TransitionEvent. Useful read-only properties include propertyName, elapsedTime, and pseudoElement.
transitionend fires when a transition finishes its intended run. transitioncancel fires when the transition is aborted early. If transitioncancel fires, transitionend will not fire for that transition.
If there is no transition delay or duration—both are 0s or neither is declared—there is no transition, and none of the transition events fire.
Prefer element.addEventListener("transitioncancel", handler). You can also set ontransitioncancel where supported.

Next: transitionend

Handle the successful finish signal for CSS transitions.

transitionend 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 touchstart Event JavaScript Element transitionend Event