jQuery - Tell when CSS Animation hits 100%

Question

Is there a way to tell when a animation hits 100% of its animation with jQuery?

{0%{-xxx-transform:translate(0,0);}
100%{-xxx-transform:translate(-500px, 300px); opacity: 0.1;}

You might want to see http://stackoverflow.com/questions/7134584/how-do-i-use-transitionend-in-jquery it could help you. — Thomas Clayson, Mar 04 '12 at 22:33

score 1 · Answer 1 · edited May 23 '17 at 12:29

1

This is the right answer.

$(elem).bind('webkitAnimationEnd', function (event) { //function });

How do I re-trigger a WebKit CSS animation via JavaScript?

edited May 23 '17 at 12:29

Community

1
1

answered Mar 05 '12 at 08:52

Philip

6,827
13
75
104

score 0 · Answer 2 · answered Oct 23 '12 at 10:48

Just for clarity's sake, here's a list of all the browser-specific 'animationEnd' properties:

$('#foo').bind('animationEnd oAnimationEnd msAnimationEnd mozAnimationEnd webkitAnimationEnd', function(event){
    // Do stuff once the CSS animation has finished.
});

score 0 · Answer 3 · answered Mar 04 '12 at 22:43

0

You could use the transitionend event.

$('#elem').bind('transitionend', function()
{
    alert('finished animating');
});

answered Mar 04 '12 at 22:43

MacMac

34,294
55
151
222

Thanks for your answer but actually transitionend wasn't the right way to go. But 'webkitAnimationEnd' or 'animationEnd'. – Philip Mar 05 '12 at 08:50

jQuery - Tell when CSS Animation hits 100%

3 Answers3