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
BCD tables only load in the browser
See also
- The
GlobalEventHandlers.ontransitionstart
event handler - The
TransitionEvent
interface - CSS properties:
transition
,transition-delay
,transition-duration
,transition-property
,transition-timing-function
- Related events:
transitionend
,transitionrun
,transitioncancel
- This event on
Document
targets:transitionstart
- This event on
Window
targets:transitionstart