transitionend

The transitionend event is fired when a CSS transition has completed. In the case where a transition is removed before completion, such as if the transition-property is removed, then the event will not fire. The event will also not fire if the animated element becomes display: none before the transition fully completes.

General info

Interface: TransitionEvent
Bubbles: Yes
Cancelable: Yes
Target: document, element
Default Action: None

Properties

Property	Type	Description
`target` Read only	`EventTarget`	The event target (the topmost target in the DOM tree).
`type` Read only	`DOMString`	The type of event.
`bubbles` Read only	`Boolean`	Whether the event normally bubbles or not
`cancelable` Read only	`Boolean`	Whether the event is cancellable or not?
`propertyName`Read only	`DOMString`	The name of the CSS property associated with the transition.
`elapsedTime`Read only	`Float`	The amount of time the transition has been running, in seconds, when this event fired. Note that this value is not affected by the value of `transition-delay`.
`pseudoElement`Read only	`DOMString`	The name (beginning with two colons) of the CSS pseudo-element on which the transition occured (in which case the target of the event is that pseudo-element's corresponding element), or the empty string if the transition occurred on an element (which means the target of the event is that element).

Example

/*
 * Listen for the transitionend event on a specified element, e.g. #slidingMenu
 * Then run a specified function, e.g. showMessage()
 */
function showMessage() {
    console.log('Transition has finished');
}

var element = document.getElementById("slidingMenu");
element.addEventListener("transitionend", showMessage, false);

Specifications

Specification	Status	Comment
CSS Transitions The definition of 'transitionend' in that specification.	Working Draft	Initial definition.

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	1.0^[1] 36	4.0 (2.0)	10	10.5^[2] 12 12.10 23	3.2^[1] 7.0.6

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	2.1	4.0 (2.0)	?	10^[2] 12 12.10	3.2^[1]

[1] Implemented in Chrome 1.0, Android 2.1 and WebKit 3.2 as webkitTransitionEnd. Chrome 36 and WebKit 7.0.6 use the standard transitionend.

[2] Implemented as oTransitionEnd starting from Opera 10.5, as otransitionend starting from version 12 and as the standard transitionend starting from version 12.10.