transitionend Event
Example
Modify the style and text of a <div> element after CSS transition completes:
Definition and Usage
The transitionend event is fired when a CSS transition has completed.
Note: If the transition is removed before completion, such as when the CSS transition-property property is removed, the transition event will not be fired.
For more information on CSS transitions, see our CSS3 Transitions.
Browser Support
The numbers in the table specify the first browser version that fully supports the event.
Numbers prefixed with "webkit" or "moz" or "o" indicate the first version that supported the event with a prefix.
| Event | |||||
|---|---|---|---|---|---|
| transitionend | 26.0 <br>4.0 as webkitTransitionEnd | 10.0 | 16.0 <br>4.0 as mozTransitionEnd | 6.1 <br>3.1 as webkitTransitionEnd | 12.1 <br>10.5 as oTransitionEnd |
Note: Safari versions 3.1 to 6.0 support this event with the webkitTransitionEnd prefix.
Syntax
Note: Internet Explorer 8 and earlier versions do not support the addEventListener() method.
| Bubbles: | Yes |
|---|---|
| Cancelable: | Yes |
| --- | --- |
| Event Type: | TransitionEvent |
| --- | --- |
Related Pages
CSS Tutorial: CSS3 Transitions
CSS Reference: CSS3 Transition Properties
CSS Reference: CSS3 transition-property Property