Element: transitionstart event

Syntax

Use the event name in methods like addEventListener(), or set an event handler property.

addEventListener("transitionstart", (event) => { }) ontransitionstart = (event) => { } 

Event type

A TransitionEvent. Inherits from Event.

Event properties

Also inherits properties from its parent Event.

TransitionEvent.propertyName Read only

A string containing the name CSS property associated with the transition.

TransitionEvent.elapsedTime Read only

A float giving the amount of time the transition has been running, in seconds, when this event fired. This value is not affected by the transition-delay property.

TransitionEvent.pseudoElement Read only

A string, starting with ::, containing the name of the pseudo-element the animation runs on. If the transition doesn't run on a pseudo-element but on the element, an empty string: ''.

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: red; transition-property: transform, background; transition-duration: 2s; transition-delay: 1s; } .transition:hover { transform: rotate(90deg); background: transparent; } 

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", () => { message.textContent = "transitionrun fired"; }); transition.addEventListener("transitionstart", () => { message.textContent = "transitionstart fired"; }); transition.addEventListener("transitionend", () => { 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

Browser compatibility

See also

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