Latest web development tutorials

transitionend event

Event Object Reference Event objects

Examples

Modify <div> CSS after the completion of the transition elements and text styles:

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

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

try it"

Definition and Usage

transitionend event is triggered after the CSS to complete the transition.

Note: if the transition is removed before completion, for example, the CSS Transition-Property attribute is removed, the transition event will not be triggered.

More on CSS transitions, please see our CSS3 transitions .

Browser Support

Figures in the table represent the first browser to support this version of events.

"Webkit" or "moz" or "o" in support of the specified number prefix the first version of the event.

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

Note: Safari 3.1 Dao version 6.0 supported the event, use webkitTransitionEnd prefix.

grammar

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

Note: Internet Explorer 8 and earlier versions of IE do not support addEventListener () method.

technical details
Whether to support the bubble: Yes
It can be canceled: Yes
Event Type: TransitionEvent

Related Pages

CSS tutorial: CSS3 transition

CSS Reference: CSS3 transition property

CSS Reference: CSS3 Transition Properties-Property


Event Object Reference Event objects