JavaScript Element transitionrun Event

What You’ll Learn

The transitionrun event fires when a CSS transition is first created—before any transition-delay has begun. Learn how it differs from transitionstart, addEventListener vs ontransitionrun, TransitionEvent properties, and five try-it labs.

Introduction

As soon as the browser creates a CSS transition, it fires transitionrun—even if a delay means the element has not started moving yet. Think of it as “the transition is scheduled / running in the delay window,” not “pixels are already changing.”

After the delay ends, you get transitionstart when motion actually begins. If someone cancels during the delay, you may still have seen transitionrun, then transitioncancel instead of start/end.

Understanding transitionrun

An instance event on elements that participate in CSS Transitions. MDN: it fires when a CSS transition is first created, i.e., before any transition-delay has begun. It is not cancelable.

• Created at the start of any delay—motion may not have started yet.
• TransitionEvent — includes propertyName, elapsedTime, pseudoElement.
• Still fires if the transition is canceled before the delay expires.
• Baseline Widely available — solid modern browser support (since Mar 2020).

📝 Syntax

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

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

ontransitionrun = (event) => { };

Event type

A TransitionEvent (inherits from Event).

Event properties

⚖️ transitionrun vs related events

MDN’s key contrast: transitionrun = created / delay starts; transitionstart = delay over, pixels moving.

Examples Gallery

Examples follow MDN Element: transitionrun event. Try It Yourself labs use a delay so you can see transitionrun before motion starts.

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

el.addEventListener("transitionrun", () => {
  console.log(
    "Transition is running but hasn't necessarily started transitioning yet"
  );
});

el.classList.add("grown");

Transition is running but hasn't necessarily started transitioning yet

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

el.ontransitionrun = () => {
  console.log(
    "Transition started running, and will start transitioning when the transition delay has expired"
  );
};

el.classList.add("grown");

Transition started running, and will start transitioning when the transition delay has expired

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

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

box.classList.add("grown");

run: transform
elapsedTime: 0
pseudoElement: ""

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

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

el.classList.add("grown");
// CSS: transition-delay: 1s; → run now, start ~1s later

transitionrun fired
(then after delay…)
transitionstart fired

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");
});

transitionrun fired

🚀 Common Use Cases

• Showing a “pending” UI state as soon as a delayed transition is scheduled.
• Debugging delay timing vs when motion actually starts.
• Analytics that count created transitions (including ones canceled in delay).
• Teaching the full CSS transition event set with a clear delay gap.
• Coordinating work that must begin at creation time, not after delay.

🔧 How It Works

📝 Notes

• MDN: Baseline Widely available (since March 2020).
• Not Deprecated, Experimental, or Non-standard — no status banner required.
• Not cancelable; observe with addEventListener.
• Fires even if canceled before delay expires; zero delay makes run and start fire together.
• Related learning: transitionend, transitioncancel, addEventListener(), JavaScript hub.

💡 Best Practices