JavaScript Element transitionend Event

What You’ll Learn

The transitionend event fires when a CSS transition completes. Learn addEventListener vs ontransitionend, TransitionEvent properties, both-direction finishes, when the event is skipped, how it pairs with transitioncancel, and five try-it labs.

Introduction

When a CSS transition runs to completion, the browser fires transitionend. Use it to run cleanup or follow-up work only after the motion is done—hide a panel, unlock a button, or chain the next animation.

It fires in both directions: when the element finishes moving to the transitioned state, and when it fully reverts to the default state. If the transition is aborted early, you get transitioncancel instead—and transitionend will not fire for that transition.

Understanding transitionend

An instance event on elements that participate in CSS Transitions. MDN: it fires when a CSS transition has completed. It is not cancelable.

• Completes in both directions—to the new state and back to the default.
• TransitionEvent — includes propertyName, elapsedTime, pseudoElement.
• Skipped if the transition is removed early (display: none, clear transition-property) or canceled.
• Baseline Widely available — solid modern browser support (since Oct 2018).

📝 Syntax

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

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

ontransitionend = (event) => { };

Event type

A TransitionEvent (inherits from Event).

Event properties

⚖️ Transition lifecycle events

MDN notes: if there is no delay or duration (both 0s or undeclared), there is no transition—and none of these events fire. If transitioncancel fires, transitionend will not.

Examples Gallery

Examples follow MDN Element: transitionend event. Try It Yourself labs let a CSS transition finish so you can see the event fire.

const box = document.querySelector(".transition");

box.addEventListener("transitionend", () => {
  console.log("Transition ended");
});

// Start the transition and let it finish:
box.classList.add("grown");

Transition ended

const box = document.querySelector(".transition");

box.ontransitionend = () => {
  console.log("Transition ended");
};

box.classList.add("grown");

Transition ended

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

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

box.classList.add("grown");

ended: transform
elapsedTime: 0.8
pseudoElement: ""

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

box.addEventListener("transitionend", (event) => {
  if (event.propertyName !== "opacity") return;
  out.textContent = "Opacity transition finished";
});

box.classList.add("grown");

Opacity transition finished

const el = document.querySelector(".transition");
const message = document.querySelector(".message");
const btn = document.getElementById("toggle");

el.addEventListener("transitionrun", () => {
  message.textContent = "transitionrun fired";
});
el.addEventListener("transitionstart", () => {
  message.textContent = "transitionstart fired";
});
el.addEventListener("transitioncancel", () => {
  message.textContent = "transitioncancel fired";
});
el.addEventListener("transitionend", () => {
  message.textContent = "transitionend fired";
});

btn.addEventListener("click", () => {
  el.classList.toggle("grown");
});

transitionend fired

🚀 Common Use Cases

• Removing a modal from the DOM only after its fade-out finishes.
• Unlocking buttons or focus after an entrance transition completes.
• Chaining a second motion only after the first property finishes.
• Analytics that distinguish finished vs canceled transitions.
• Teaching the full CSS transition event set alongside transitioncancel.

🔧 How It Works

📝 Notes

• MDN: Baseline Widely available (since October 2018).
• Not Deprecated, Experimental, or Non-standard — no status banner required.
• Fires in both directions; filter with propertyName when needed.
• If transitioncancel fires, transitionend will not fire for that transition.
• Related learning: transitioncancel, animationend, addEventListener(), JavaScript hub.

💡 Best Practices