v151 · javascript · web animations

Transition companion

A CSS transition is a CSSTransition object under the hood. TransitionEvent.animation finally hands it to you — so you can read it and even cancel it mid-flight.

box
handle source
—
constructor
—
transitionProperty
—
playState
idle
currentTime (ms)
—
effect.duration (ms)
—

Transition event log

Toggle the box to start a transition.

How it works

slab.addEventListener("transitionrun", (event) => {
  if (event.propertyName !== "transform") return;
  const t = event.animation;               // a CSSTransition — nullable, so guard it
  if (!t) return;                          // synthetic event, or pre-151 browser
  console.log(t.constructor.name);          // "CSSTransition"
  console.log(t.transitionProperty);        // "transform"
  cancelBtn.onclick = () => t.cancel();      // stop it partway
});

see also