dom / latest / htmlelement / transitionstart_event.html /

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.ontransitionstart = () => {
  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
# transitionstart

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
transitionstart_event
74
12
53
10
62
13.1
74
74
53
53
13.4
11.0

See also

© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitionstart_event

Name Web APIs
Version
Badge
Last Updated 2022-04-27T09:33:08Z