References

Beginner-friendly references for web development, with live, editable examples.

The HTML ontransitionstart event

Event All modern browsers Updated
Quick answer

The HTML ontransitionstart attribute runs JavaScript when a CSS transition actually starts (after any delay). It is an inline handler for the transitionstart event; in modern code prefer addEventListener('transitionstart', …).

Overview

The ontransitionstart event attribute runs JavaScript when a CSS transition starts. In JavaScript the event itself is named transitionstart. Drop the on prefix when you call addEventListener.

It is a CSS transition event, fired when the transition actually begins animating, that is, after any transition-delay has elapsed. Use transitionrun if you need the earlier moment when the transition was created. The handler receives a TransitionEvent carrying the propertyName.

You can wire this up with the inline ontransitionstart HTML attribute, but the modern, recommended approach is element.addEventListener('transitionstart', handler) in JavaScript. That keeps behavior out of your markup, lets you attach several handlers to the same event, and makes them easy to remove. The inline attribute is fine for quick demos.

Syntax

<element ontransitionstart="handler()">…</element>

element.addEventListener('transitionstart', handler);

Best practices

  • Prefer element.addEventListener('transitionstart', handler) over the inline ontransitionstart attribute; it separates behavior from markup and allows multiple handlers.
  • Use it to react to a CSS transition at a precise moment instead of guessing with a timer.
  • Check event.propertyName when several properties transition at once.
  • Respect prefers-reduced-motion for the transitions these events track.

Frequently asked questions

What is the ontransitionstart event?
It runs JavaScript when a CSS transition starts. In JavaScript the event is named transitionstart.
How do I run code after a CSS transition ends?
Listen for the transitionend event on the element.
Which property finished transitioning?
Read event.propertyName from the TransitionEvent.
Should I use the ontransitionstart attribute or addEventListener?
Prefer element.addEventListener('transitionstart', …) in JavaScript. The inline ontransitionstart attribute works but mixes behavior into the markup and allows only one handler per element.
ontransitionrun onunhandledrejection