TransitionEvent
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
The TransitionEvent interface represents events providing information related to transitions.
Constructor
TransitionEvent()-
Creates a
TransitionEventevent with the given parameters.
Instance properties
Also inherits properties from its parent Event.
TransitionEvent.animationRead only-
A
CSSTransitionread-only property containing the animation associated with the event. TransitionEvent.propertyNameRead only-
A string containing the name CSS property associated with the transition.
TransitionEvent.elapsedTimeRead only-
A
floatgiving the amount of time the transition has been running, in seconds, when this event fired. This value is not affected by thetransition-delayproperty. TransitionEvent.pseudoElementRead 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:''.
Types of TransitionEvent
transitioncancel-
An
Eventfired when a CSS transition has been canceled. transitionend-
An
Eventfired when a CSS transition has finished playing. transitionrun-
An
Eventfired when a CSS transition is created (i.e., when it is added to a set of running transitions), though not necessarily started. transitionstart-
An
Eventfired when a CSS transition has started transitioning.
Instance methods
Also inherits methods from its parent Event.
Specifications
| Specification |
|---|
| CSS Transitions Module Level 1> # interface-transitionevent> |
Browser compatibility
See also
- Using CSS transitions
- CSS properties:
transition,transition-delay,transition-duration,transition-property,transition-timing-function - CSS at-rules:
@starting-style