This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The TransitionEvent
interface represents events providing information related to transitions.
Constructor
TransitionEvent()
- Creates a
TransitionEvent
event with the given parameters.
Properties
Also inherits properties from its parent Event
.
TransitionEvent.propertyName
Read only- Is a
DOMString
containing the name CSS property associated with the transition. TransitionEvent.elapsedTime
Read only- Is 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- Is a
DOMString
, 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, when it is added to a set of running transitions, though not nessarilty started transitionstart
- An
Event
fired when a CSS transition has started transitioning.
Methods
Also inherits properties from its parent Event
.
TransitionEvent.initTransitionEvent()
- Initializes a
TransitionEvent
created using the deprecatedDocument.createEvent("TransitionEvent")
method.
Specifications
Specification | Status | Comment |
---|---|---|
CSS Transitions The definition of 'TransitionEvent' in that specification. |
Working Draft | Initial definition. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
TransitionEvent | Chrome
Full support
27
| Edge Full support 12 | Firefox Full support 4 | IE Full support 10 | Opera Full support Yes | Safari Full support Yes | WebView Android
Full support
Yes
| Chrome Android
Full support
27
| Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android
Full support
2.0
|
TransitionEvent() constructor | Chrome Full support 27 | Edge Full support 79 | Firefox Full support 23 | IE No support No | Opera Full support Yes | Safari No support No | WebView Android Full support Yes | Chrome Android Full support 27 | Firefox Android Full support 23 | Opera Android Full support Yes | Safari iOS No support No | Samsung Internet Android Full support 2.0 |
animationName | Chrome No support No | Edge No support 12 — 79 | Firefox Full support 4 | IE Full support 10 | Opera Full support Yes | Safari Full support Yes | WebView Android No support No | Chrome Android No support No | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android No support No |
elapsedTime | Chrome Full support 2 | Edge Full support 12 | Firefox Full support 4 | IE Full support 10 | Opera Full support Yes | Safari Full support 6 | WebView Android Full support Yes | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support 1.0 |
initTransitionEvent | Chrome
No support
No
| Edge No support 12 — 79 | Firefox No support 6 — 23 | IE Full support 10 | Opera
No support
No
| Safari Full support Yes | WebView Android
No support
No
| Chrome Android
No support
No
| Firefox Android No support 6 — 23 | Opera Android
No support
No
| Safari iOS Full support Yes | Samsung Internet Android
No support
No
|
propertyName | Chrome Full support 2 | Edge Full support 12 | Firefox Full support Yes | IE ? | Opera Full support Yes | Safari Full support 6 | WebView Android Full support Yes | Chrome Android Full support 18 | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support 1.0 |
pseudoElement | Chrome Full support 2 | Edge Full support 79 | Firefox Full support 23 | IE No support No | Opera Full support Yes | Safari Full support 6 | WebView Android Full support Yes | Chrome Android Full support 18 | Firefox Android Full support 23 | Opera Android Full support Yes | Safari iOS No support No | Samsung Internet Android Full support 1.0 |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown
- Experimental. Expect behavior to change in the future.
- Experimental. Expect behavior to change in the future.
- Non-standard. Expect poor cross-browser support.
- Non-standard. Expect poor cross-browser support.
- Deprecated. Not for use in new websites.
- Deprecated. Not for use in new websites.
- See implementation notes.
- See implementation notes.
- Requires a vendor prefix or different name for use.
- Requires a vendor prefix or different name for use.