transitionend Event
Definition and Usage
The transitionend event occurs when the CSS transition is completed.
Note:If the transition is removed before completion, for example, if the CSS transition-property Properties that do not trigger the transitionend event.
For more knowledge about CSS transitions, please study our CSS3 Transition Tutorial.
Example
Do something to the <div> element when the CSS transition ends:
// Code for Safari 3.1 to 6.0
document.getElementById("myDIV").addEventListener("webkitTransitionEnd", myFunction);
// Standard Syntax
document.getElementById("myDIV").addEventListener("transitionend", myFunction);
Syntax
object.addEventListener("webkitTransitionEnd", myScript); // Code for Safari 3.1 to 6.0
object.addEventListener("transitionend", myScript); // Standard Syntax
Note:Internet Explorer 8 or earlier versions do not support addEventListener() Method.
Technical Details
| Bubble: | Support |
|---|---|
| Cancelable: | Support |
| Event Type: | TransitionEvent |
| DOM Version: | Level 3 Events |
Browser Support
The numbers in the table indicate the first browser version that fully supports the event.
Numbers following "webkit", "moz", or "o" indicate the first version using these prefixes.
| Event | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| transitionend | 26.0 4.0 (webkit) |
10.0 | 16.0 4.0 (moz) |
6.1 3.1 (webkit) |
12.1 10.5 (o) |
