The TransitionEvent
interface represents events providing information related to transitions.
On this page
TransitionEvent
Constructor
-
TransitionEvent()
-
Creates a
TransitionEvent
event with the given parameters.
Instance 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 thetransition-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:''
.
Types of TransitionEvent
-
transitioncancel
-
An
Event
fired when a CSS transition has been cancelled. -
transitionend
-
An
Event
fired when a CSS transition has finished playing. -
transitionrun
-
An
Event
fired when a CSS transition is created (i.e., when it is added to a set of running transitions), though not necessarily started. -
transitionstart
-
An
Event
fired when a CSS transition has started transitioning.
Instance methods
Also inherits methods from its parent Event
.
Specifications
Specification |
---|
CSS Transitions # interface-transitionevent |
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 | |
TransitionEvent |
27 | 14 | 23 | No | 15 | 76 | 4.4 | 27 | 23 | 15 | 76 | 2.0 |
TransitionEvent |
272–71 | 12 | 4 | 10 | ≤12.1 | 74 | ≤37–714.4 | 2718–71 | 4 | ≤12.1 | 73 | 2.01.0–10.0 |
elapsedTime |
2 | 12 | 4 | 10 | ≤12.1 | 6 | 4.4 | 18 | 4 | ≤12.1 | 6 | 1.0 |
propertyName |
2 | 12 | 4 | 10 | ≤12.1 | 6 | 4.4 | 18 | 4 | ≤12.1 | 6 | 1.0 |
pseudoElement |
2 | 79 | 23 | No | 15 | 6 | 4.4 | 18 | 23 | 14 | 6 | 1.0 |
See also
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/TransitionEvent