JavaScript Element transitionstart Event

What You’ll Learn

The transitionstart event fires when a CSS transition has actually started—after any transition-delay has ended. Learn how it differs from transitionrun, addEventListener vs ontransitionstart, TransitionEvent properties, and five try-it labs.

Introduction

When the delay is over and property values begin changing, the browser fires transitionstart. Use it to mark UI as “in motion,” start related work that should wait until animation actually begins, or log that the delay window ended.

Earlier in the lifecycle, transitionrun fires when the transition is created (start of any delay). After motion finishes you get transitionend; if it aborts, you get transitioncancel.

Understanding transitionstart

An instance event on elements that participate in CSS Transitions. MDN: it fires when a CSS transition has actually started, i.e., after any transition-delay has ended. It is not cancelable.

• Starts when delay ends and the animation of properties begins.
• TransitionEvent — includes propertyName, elapsedTime, pseudoElement.
• May be skipped if the transition is canceled during the delay (after transitionrun).
• Baseline Widely available — solid modern browser support (since Mar 2020).

📝 Syntax

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

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

ontransitionstart = (event) => { };

Event type

A TransitionEvent (inherits from Event).

Event properties

⚖️ transitionstart vs related events

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

Examples Gallery

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

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

element.addEventListener("transitionstart", () => {
  console.log("Started transitioning");
});

element.classList.add("grown");

Started transitioning

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

element.ontransitionstart = () => {
  console.log("Started transitioning");
};

element.classList.add("grown");

Started transitioning

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

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

box.classList.add("grown");

start: transform
elapsedTime: 0
pseudoElement: ""

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

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

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

transitionstart fired

🚀 Common Use Cases

• Marking UI as “animating” only after delay (not during the wait).
• Starting sound, haptics, or secondary effects when motion begins.
• Debugging delay timing vs creation (transitionrun).
• Analytics that count transitions that actually started moving.
• Teaching the full CSS transition event set with a clear delay gap.

🔧 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.
• May never fire if canceled during delay after transitionrun.
• Related learning: transitionrun, transitionend, addEventListener(), JavaScript hub.

💡 Best Practices