Web/API/TransitionEvent

From Get docs

This is an experimental technologyCheck 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 the transition-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 deprecated Document.createEvent("TransitionEvent") method.

Specifications

Specification Status Comment
CSS TransitionsThe definition of 'TransitionEvent' in that specification. Working Draft Initial definition.

Browser compatibility

Update compatibility data on GitHub

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet

TransitionEvent

Experimental'

Chrome Full support 27


Full support 27


No support 2 — 71

Prefixed'

Prefixed' Implemented with the vendor prefix: WebKit

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


Full support Yes


No support ? — 71

Prefixed'

Prefixed' Implemented with the vendor prefix: WebKit

Chrome Android Full support 27


Full support 27


No support 18 — 71

Prefixed'

Prefixed' Implemented with the vendor prefix: WebKit

Firefox Android

Full support 4

Opera Android

Full support Yes

Safari iOS

Full support Yes

Samsung Internet Android Full support 2.0


Full support 2.0


No support 1.0 — 10.0

Prefixed'

Prefixed' Implemented with the vendor prefix: WebKit

TransitionEvent() constructor

Experimental'

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

Experimental'

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

Experimental'

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

Deprecated'Non-standard'

Chrome No support No

Notes'

No support No

Notes'

Notes' Removal version unknown.

Edge

No support 12 — 79

Firefox

No support 6 — 23

IE

Full support 10

Opera No support No

Notes'

No support No

Notes'

Notes' Removal version unknown.

Safari

Full support Yes

WebView Android No support No

Notes'

No support No

Notes'

Notes' Removal version unknown.

Chrome Android No support No

Notes'

No support No

Notes'

Notes' Removal version unknown.

Firefox Android

No support 6 — 23

Opera Android No support No

Notes'

No support No

Notes'

Notes' Removal version unknown.

Safari iOS

Full support Yes

Samsung Internet Android No support No

Notes'

No support No

Notes'

Notes' Removal version unknown.

propertyName

Experimental'

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

Experimental'

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.


See also