Web/API/TransitionEvent

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

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.

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

• Using CSS transitions
• CSS properties: transition, transition-delay, transition-duration, transition-property, transition-timing-function.

TransitionEvent by Mozilla Contributors is licensed under CC-BY-SA 2.5.