HTMLElement: transitionstart event

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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

Bubbles Yes
Cancelable No
Interface TransitionEvent
Event handler property ontransitionstart

Examples

This code adds a listener to the transitionstart event:

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

The same, but using the ontransitionstart property instead of addEventListener():

element.ontransitionrun = () => {
  console.log('Started transitioning');
};

Live example

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

<div class="transition">Hover over me</div>
<div class="message"></div>
.transition {
  width: 100px;
  height: 100px;
  background: rgba(255,0,0,1);
  transition-property: transform, background;
  transition-duration: 2s;
  transition-delay: 1s;
}

.transition: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.

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

transition.addEventListener('transitionrun', function() {
  message.textContent = 'transitionrun fired';
});

transition.addEventListener('transitionstart', function() {
  message.textContent = 'transitionstart fired';
});

transition.addEventListener('transitionend', function() {
  message.textContent = 'transitionend 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

Specification
CSS Transitions Level 2 (CSS Transitions 2)
# transitionstart

Browser compatibility

BCD tables only load in the browser

See also