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
TransitionEventevent with the given parameters.
Properties
Also inherits properties from its parent Event.
TransitionEvent.propertyNameRead only- Is a
DOMStringcontaining the name CSS property associated with the transition. TransitionEvent.elapsedTimeRead only- Is a
floatgiving the amount of time the transtion has been running, in seconds, when this event fired. This value is not affected by thetransition-delayproperty. TransitionEvent.pseudoElementRead 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:''.
Methods
Also inherits properties from its parent Event.
TransitionEvent.initTransitionEvent()- Initializes a
TransitionEventcreated 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.
| Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | Yes | Yes | 4 | 10 | Yes | Yes |
TransitionEvent() constructor | Yes | No | 23 | No | Yes | No |
animationName | Yes | Yes | 4 | 10 | Yes | Yes |
propertyName | ? | ? | ? | ? | ? | ? |
elapsedTime | Yes | Yes | 4 | 10 | Yes | Yes |
pseudoElement | Yes | No | 23 | No | Yes | No |
initTransitionEvent | No1 | Yes | 6 — 23 | 10 | No1 | Yes |
| Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
|---|---|---|---|---|---|---|---|
| Basic support | Yes | Yes | Yes | 4 | Yes | Yes | ? |
TransitionEvent() constructor | Yes | Yes | No | 23 | Yes | No | ? |
animationName | Yes | Yes | Yes | 4 | Yes | Yes | ? |
propertyName | ? | ? | ? | ? | ? | ? | ? |
elapsedTime | Yes | Yes | Yes | 4 | Yes | Yes | ? |
pseudoElement | Yes | Yes | No | 23 | Yes | No | ? |
initTransitionEvent | No1 | No1 | Yes | 6 — 23 | No1 | Yes | ? |
1. Removal version unknown.