transitionstart

The transitionstart event is fired when a CSS transition has actually started, i.e. after any transition-delay has ended.

General info

Interface

TransitionEvent

Bubbles

Yes

Cancelable

No

Target

document, element

Default Action

None

Properties

Examples

In the following example, we have a simple <div> element, styled with a transition that includes a delay:

<div></div>

div {
  width: 200px;
  height: 200px;
  background: rgba(255,0,0,1);
  transition-property: transform background;
  transition-duration: 2s;
  transition-delay: 2s;
}

div:hover {
  transform: rotate(90deg);
  background: rgba(255,0,0,0);
}

To this, we'll add some JavaScript to indicate where the transitionstart and transitionrun events fire.

var divElem = document.querySelector('div');

divElem.addEventListener('transitionrun', function() {
  console.log('transitionrun fired');
});

divElem.addEventListener('transitionstart', function() {
  console.log('transitionstart fired');
});

The difference is that:

• transitionrun fires when the transition is created (i.e. at the start of any delay).
• transitionstart fires when the actual animation has begun (i.e. at the end of any delay).

Specifications

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

See also

• The TransitionEvent interface
• transitionrun, transitionend, transitioncancel
• CSS properties: transition, transition-delay, transition-duration, transition-property, transition-timing-function.