transitionend Event
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 »
Description
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.
Syntax
object.addEventListener("webkitTransitionEnd", myScript); // Code for Safari 3.1 to 6.0
object.addEventListener("transitionend", myScript); // Standard syntax
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
Browser Support
event.transitionEnd is a DOM Level 3 (2004) feature.
It is fully supported in all modern browsers:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Yes | Yes | Yes | Yes | Yes | 11 |
