Last Updated: February 25, 2016
·
23.63K
· hennson

jQuery - add CSS animation class and remove after animation

Ok, I know, the title says it all, but I would like to say some words to the scope of this tip. If you are using custom CSS animations or a library like animate.css (http://daneden.me/animate/) you'll certainly face the following scenario - apply the animation class and remove it after the animation has occurred. The following snippet shows how to achieve this the cross browser way:

$("#animateme").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){
     $(this).removeClass("animation");
}).addClass("animation");

HTH

2 Responses
Add your response

I prefere this way much more, compatible zepto and no deprecated. And you should watch only once for the event:

$('#animateme').addClass('animate').one('webkitAnimationEnd...', function(){$(this).removeClass('animate')});

over 1 year ago ·

I'm a total noob... couldn't get this to work... i feel bad :'$

over 1 year ago ·