JavaScript Element transitionend Event

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

Definition

In JavaScript, the transitionend event fires when a CSS transition has completed (MDN)—in both directions (toward the new state and when fully reverting). The event object is a TransitionEvent. It is not cancelable. 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 transitionend. Start with this line.

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

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

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

Parameters

ParameterDescription
Event targetRequired. Element whose CSS transition finished
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 transitionend

Log a message when a CSS transition finishes.

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

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

How It Works

  1. Pick the element. The node that will run a CSS transition.
  2. Register the listener. transitionend runs when that transition completes.
  3. Show feedback. Update status text so students see the finish.
  4. Trigger finish in the lab. Start a short transition and wait until it ends.

Example 2 — Read TransitionEvent Fields

Print propertyName and elapsedTime when end fires.

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

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

How It Works

  1. Receive a TransitionEvent. End uses the same event type as other transition events.
  2. Read the property. propertyName is the CSS property that finished (for example opacity).
  3. Read elapsed time. elapsedTime is how many seconds the transition ran.
  4. Filter when needed. Ignore events for properties you do not care about.

Example 3 — End vs Cancel

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

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

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

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

How It Works

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

Browser Support

transitionend is Baseline Widely available on MDN (across browsers since October 2018). It is a standard CSS Transitions event, not Deprecated or Experimental.

✓ Baseline · Widely available

Element transitionend

Fires when a CSS transition completes. 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
transitionend Excellent

Bottom line: Safe to use in modern web apps. Pair with transitioncancel when abort cleanup matters.

Frequently Asked Questions

It fires when a CSS transition has completed (MDN)—both when finishing toward the transitioned state and when fully reverting to the default state. It is not cancelable.
No. MDN does not mark Element transitionend as Deprecated, Experimental, or Non-standard. It is Baseline Widely available (across browsers since October 2018).
A TransitionEvent. Useful read-only properties include propertyName, elapsedTime, and pseudoElement.
transitionend fires when the transition finishes normally. transitioncancel fires when it is aborted early. If transitioncancel fires, transitionend will not fire for that transition.
If the transition is removed before completion (for example transition-property is cleared or display is set to none), if transitioncancel fires, or if delay and duration are both 0s / undeclared so there is no transition.
Yes. MDN notes transitionend fires when the transition finishes in either direction—toward the new state and when reverting fully to the default state.

Next: transitionrun

Learn when a CSS transition is created and scheduled to run.

transitionrun 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 transitioncancel Event JavaScript Element transitionrun Event