Is there a callback on completion of a CSS3 animation?

Question

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?

Infinity

possible duplicate of Callback on CSS transition – Tyro

if you want to do simple CSS action, for example, hide the element after its transition, maybe you don't need to a callback and instead, you can solve your problem with animation's keyframe. – Consumptive

@Tyro That question is about CSS transitions, not CSS animations. – Argeliaargent

Answer 1

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/

Theatrician

For IE10 it's 'MSAnimationEnd' (see msdn.microsoft.com/en-us/ie/hh272902#_CSSAnimations) – Hinder

It's transitionend, not animationend. – Fossa

@MichaelJones no, that's for css3 transitions. the question was about animations. – Dagney

The jQuery version doesn't work for me, in both Firefox and Chrome. The Vanilla JS version does work though. – Bacolod

@MartinWittemann IE10 final now uses animationend msdn.microsoft.com/en-us/library/ie/…. @Bacolod the code does work in Chrome and FF 14, see updated fiddle jsfiddle.net/W3y7h – Theatrician

Duplicate of #9255779 which has a more complete solution – Chapland

It's worth noting that the event gets fired for every child element that also animates (at least in Chrome). I'm not sure about a work around for this, but be advised that binding on one element will trigger the callback every time another element nested within the main element animates. – Weakness

is there a way to detect whether animationend or variants are supported? Was having an issue with the application cross browser compatibility that turned out to be an event listener that never got triggered so have to put in a work around to force it to happen, but can't find a way to detect it – Sweetbread

Answer 2

An easy way for you to do a callback that also handles your CSS3 transitions/browser compatibilities would be the jQuery Transit Plugin. Example:

//Pulsing, moving element
$("#element").click( function () {
    $('#element').transition({ opacity: 0, x: '75%' }, function () { $(this).transition({ opacity: 1, x: '0%' }).trigger("click"); });
});

JS Fiddle Demo

Alkyl

Bonus point for it sharing API spec with jQuery animate, but still taking advantage of the hardware-rendered smoothness of CSS animations. We just replaced jQuery animate pretty much in all places with this. – Whitman

Answer 3

If you created the animation with Javascript instead of CSS then you'll want to use the Animation API to set the callback for the animation's onfinish event.

animation = myAnimatedElement.animate([
    {transform: 'translateX(0px)'},
    {transform: 'translateX(-100px)'},
], 700);

animation.onfinish = (e) => {
    // Do something after the animation finishes
};

Worth keeping in mind that if the animation is canceled, removed, or paused then the onfinish event does not fire. You may want to add listeners for those events as well depending on your needs.

Besetting