transitionend event
Definition and usage
The transitionend event occurs when the CSS transition is complete.
Note:If the transition is removed before completion, for example if the CSS transition-property Properties, will 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
| Bubbling: | Supported |
|---|---|
| Cancelable: | Supported |
| 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 followed by "webkit", "moz" or "o" specify 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) |
