Alex Rivera | Logout

Is there a callback on completion of a CSS3 animation?

Asked 2011-05-31T10:51:05.780
103

Is there any way to implement a callback function in case of css3 animation? In case of Javascript animation its possible but not finding any way to do it in css3.

One way I could see is to execute callback after the animation duration but that doesn't make sure that it will always be called right after the animation ends. It will depend on the browser UI queue. I want a more robust method. Any clue?

javascript css dom-events css-animations
Edit
Report

1 Answer

144

Yes, there is. The callback is an event, so you must add an event listener to catch it. This is an example with jQuery:

$("#sun").bind('oanimationend animationend webkitAnimationEnd', function() { 
   alert("fin") 
});

Or pure js:

element.addEventListener("webkitAnimationEnd", callfunction,false);
element.addEventListener("animationend", callfunction,false);
element.addEventListener("oanimationend", callfunction,false);

Live demo: http://jsfiddle.net/W3y7h/

answered 2011-06-02T05:28:03.570

Your Answer