THE WORLD'S LARGEST WEB DEVELOPER SITE

transitionend Event

❮ Event Object

Example

Do something with a <div> element when a CSS transition has ended:

// Code for Safari 3.1 to 6.0
document.getElementById("myDIV").addEventListener("webkitTransitionEnd", myFunction);

// Standard syntax
document.getElementById("myDIV").addEventListener("transitionend", myFunction);
Try it Yourself »

Definition and Usage

The transitionend event occurs when a CSS transition has completed.

Note: If the transition is removed before completion, e.g. if the CSS transition-property property is removed, the transitionend event will not fire.

For more information about CSS Transitions, see our tutorial on CSS3 Transitions.


Browser Support

The numbers in the table specify the first browser version that fully supports the event.

Numbers followed by "webkit", "moz" or "o" specify the first version that worked with a prefix.

Event
transitionend 26.0
4.0 (webkitTransitionEnd)
10.0 16.0
4.0 (mozTransitionEnd)
6.1
3.1 (webkitTransitionEnd)
12.1
10.5 (oTransitionEnd)


Syntax

object.addEventListener("webkitTransitionEnd", myScript);  // Code for Safari 3.1 to 6.0
object
.addEventListener("transitionend", myScript);        // Standard syntax

Note: The addEventListener() method is not supported in Internet Explorer 8 and earlier versions.


Technical Details

Bubbles: Yes
Cancelable: Yes
Event type: TransitionEvent
DOM Version: Level 3 Events

Related Pages

CSS Tutorial: CSS3 Transitions

CSS Reference: CSS3 transition Property

CSS Reference: CSS3 transition-property Property


❮ Event Object