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

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

❮ Previous Events Reference Next ❯