Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 32 down vote favorite
18

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

share|improve this question

4 Answers

up vote 36 down vote accepted

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 );
share|improve this answer
1  
Thanks Doug, that did it. – Pompair Jan 19 '10 at 10:49
is there the same thing for other browser then webkit? – meo Feb 27 '11 at 22:10
3  
yes, 'transitionend' for Mozilla & 'oTransitionEnd' in Opera. – qqryq Mar 1 '11 at 13:14
1  
what does the false at the end do? – meo Mar 15 '11 at 8:16
@meo It has something to do with the this element inside the callback. But its a required parameter, so in this case its just fulfilling the requirement. – Doug Neiner Mar 19 '11 at 17:23
show 3 more comments
up vote 20 down vote

Yes, if such things are supported by the browser, then an event is triggered when the transition completes. The actual event however, differs between browsers:

  • Webkit browsers (Chrome, Safari) use webkitTransitionEnd
  • Firefox uses transitionend
  • IE9+ uses msTransitionEnd
  • Opera uses oTransitionEnd

However you should be aware that webkitTransitionEnd doesn't always fire! This has caught me out a number of times, and seems to occur if the animation would have no effect on the element. To get around this, it makes sense to use a timeout to fire the event handler in the case that it's not been triggered as expected. A blog post about this problem is available here: http://www.cuppadev.co.uk/the-trouble-with-css-transitions/

With this in mind, I tend to use this event in a chunk of code that looks a bit like this:

var transitionEndEventName = "XXX"; //figure out, e.g. "webkitTransitionEnd".. 
var elemToAnimate = ... //the thing you want to animate..
var done = false;
var transitionEndedHandler = function(){
     done = true;
     //do your transition finished stuff..
     elemToAnimate.removeEventListener(transitionEndEventName,
                                        transitionEnded, false);
};
elemToAnimate.addEventListener(transitionEndEventName,
                                transitionEnded, false);

//animation triggering code here..

//ensure tidy up if event doesn't fire..
setTimeout(function(){
    if(!done){
        console.log("timeout needed to call transition ended..");
        transitionEnded();
    }
}, XXX); //note: XXX should be the time required for the
        //animation to complete plus a grace period (e.g. 10ms)

Note: to get the transition event end name you can use the method posted as the answer in: How do I normalize CSS3 Transition functions across browsers?.

Note: this question is also related to: - CSS3 transition events

share|improve this answer
This is a much fuller answer than the accepted one. Why isn't this more upvoted. – Wes Jun 23 at 9:29
up vote 5 down vote

I am using the following code, is much simpler than trying to detect which specific end event a browser uses.

$(".myClass").on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', 
function() {
 //do something
});
share|improve this answer
up vote 2 down vote

The jQuery.transit plugin, a plugin for CSS3 transformations and transitions, can call your CSS animations from script and give you a callback.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.