JavaScript Element transitionrun Event

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

Definition

In JavaScript, the transitionrun event fires when a CSS transition is first created—before any transition-delay has begun (MDN). The event object is a TransitionEvent. It is not cancelable. Values may not be animating yet; that is transitionstart (end of the delay).

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

Syntax

Listen for transitionrun. Start with this line.

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

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

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

Parameters

ParameterDescription
Event targetRequired. Element whose CSS transition was created
TransitionEventRequired. Carries propertyName, elapsedTime, pseudoElement
Delay (optional)Optional. Makes the gap between run and start visible

Return Value

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

JavaScript Examples

Example 1 — Listen for transitionrun

Log a message as soon as a CSS transition is created.

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

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

How It Works

  1. Pick the element. The node that will get a CSS transition.
  2. Register the listener. transitionrun runs when the transition is created.
  3. Show feedback. Update status text as soon as the transition is scheduled.
  4. Trigger in the lab. Change a transitioned style (for example opacity) after setting a non-zero duration.

Example 2 — Read TransitionEvent Fields

Print propertyName when the transition is created.

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

box.addEventListener("transitionrun", (event) => {
  out.textContent = "run: " + event.propertyName;
});
Try It Yourself

How It Works

  1. Receive a TransitionEvent. Run uses the same event type as other transition events.
  2. Read the property. propertyName is which CSS property was scheduled.
  3. Filter when needed. Ignore properties you do not care about.
  4. Note elapsedTime. At creation it is typically near 0.

Example 3 — Run vs Start (with Delay)

Log both events so the delay gap is obvious.

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

function log(msg) {
  lines.push(msg);
  out.textContent = lines.join("\\n");
}

box.addEventListener("transitionrun", () => {
  log("transitionrun");
});

box.addEventListener("transitionstart", () => {
  log("transitionstart");
});
Try It Yourself

How It Works

  1. Listen for both. Run is creation; start is when animation begins.
  2. Use a delay in the lab. For example opacity 0.3s linear 0.5s.
  3. See the order. transitionrun prints first; transitionstart after the delay.
  4. No delay? MDN: both fire (essentially together).
Compatibility

Browser Support

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

✓ Baseline · Widely available

Element transitionrun

Fires when a CSS transition is first created. 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
transitionrun Excellent

Bottom line: Safe to use in modern web apps. Pair with transitionstart when you need “delay ended / animation begun.”

Frequently Asked Questions

It fires when a CSS transition is first created—before any transition-delay has begun (MDN). The transition may still be waiting in its delay period. It is not cancelable.
No. MDN does not mark Element transitionrun as Deprecated, Experimental, or Non-standard. It is Baseline Widely available (across browsers since March 2020).
transitionrun fires when the transition is created (start of any delay). transitionstart fires when the actual animation begins (end of any delay). With no delay or a negative delay, both fire.
A TransitionEvent. Useful read-only properties include propertyName, elapsedTime, and pseudoElement.
Yes. MDN notes transitionrun still occurs even if the transition is canceled before the delay expires—then you typically see transitioncancel instead of transitionstart/transitionend.
Prefer element.addEventListener("transitionrun", handler). You can also set ontransitionrun where supported.

Next: transitionstart

Learn when animated values actually begin changing after any delay.

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