Philip
Philip

Reputation: 7166

jQuery - Tell when CSS Animation hits 100%

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;}

Upvotes: 2

Views: 366

Answers (3)

Labu
Labu

Reputation: 2582

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.
});

Upvotes: 0

Philip
Philip

Reputation: 7166

This is the right answer.

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

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

Upvotes: 1

MacMac
MacMac

Reputation: 35321

You could use the transitionend event.

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

Upvotes: 0

Related Questions