animate.css: repeating animations

Question

I'm using animate.css for doing some animations. If an error occurs, the element should bounce:

$target.addClass('animated bounce');

That's working well. But if the user is doing the same thing, there won't be a second animation, as the classes are already added.

So I try to remove the classes after the animation like this:

$target.addClass('animated bounce');
setTimeout(function(){
    $target.removeClass('animated bounce');
}, 1000);

My question is, if this is how it should be done (I don't know how long the animation is exactly), or is there another solution for repeating animations?

Answer 1

You need to do this:

$('#target').removeClass().addClass('bounce animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
    $(this).removeClass();
});

$('#target') is in this case the ID of your element, change this to your needs.