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.
General info
- Interface
TransitionEvent
- Bubbles
- Yes
- Cancelable
- No
- Target
document
,element
- Default Action
- None
Properties
Property | Type | Description |
---|---|---|
target Read only |
EventTarget |
The event target (the topmost target in the DOM tree). |
type Read only |
DOMString |
The type of event. |
bubbles Read only |
Boolean |
Whether the event normally bubbles or not |
cancelable Read only |
Boolean |
Whether the event is cancellable or not? |
propertyName Read only |
DOMString |
The name of the CSS property associated with the transition. |
elapsedTime Read only |
Float |
The amount of time the transition has been running, in seconds, as of the time the event was generated. This value is not affected by the value of transition-delay . |
pseudoElement Read only |
DOMString |
The name (beginning with two colons) of the CSS pseudo-element on which the transition occured (in which case the target of the event is that pseudo-element's corresponding element), or the empty string if the transition occurred on an element (which means the target of the event is that element). |
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
Specification | Status | Comment |
---|---|---|
CSS Transitions The definition of 'transitionstart' in that specification. |
Working Draft | Initial definition. |
Browser compatibility
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|
Basic support | ? | (Yes) | 53 (53) | 10 | ? | ? |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | ? | (Yes) | 53.0 (53) | ? | ? | ? |
See also
- The
TransitionEvent
interface transitionrun
,transitionend
,transitioncancel
- CSS properties:
transition
,transition-delay
,transition-duration
,transition-property
,transition-timing-function
.