Callback on CSS transition

Viewed 61385

Is it possible to get a notification (like callback) when a CSS transition has been completed?

5 Answers

I know that Safari implements a webkitTransitionEnd callback that you can attach directly to the element with the transition.

Their example (reformatted to multiple lines):

box.addEventListener( 
     'webkitTransitionEnd', 
     function( event ) { 
         alert( "Finished transition!" ); 
     }, false );

This can easily be achieved with the transitionend Event see documentation here A simple example:

document.getElementById("button").addEventListener("transitionend", myEndFunction);

function myEndFunction() {
 this.innerHTML = "Transition event ended";
}
#button {transition: top 2s; position: relative; top: 0;}
<button id="button" onclick="this.style.top = '55px';">Click me to start animation</button>

Related