transitionendEvent

Examples

Modify the style and text of the <div> element after the CSS transition completes:

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

// Standard syntax
document.getElementById("myDIV").addEventListener("transitionend", myFunction);

Try it yourself »

Definition and Usage

The transitionend event is triggered after a CSS transition has completed.

Note:If the transition is removed before completion, for example, a CSStransition-propertyproperty is removed, the transition event will not be triggered.

For more about CSS transitions, see ourCSS3 Transitions。

Browser Support

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

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

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

Note:Safari 3.1 to 6.0 support this event with the webkitTransitionEnd prefix.

Syntax

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

Note:Internet Explorer 8 and earlier IE versions do not supportaddEventListener()the method.

Technical Details