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
Written by Henning
Related protips
2 Responses
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
·
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Jquery
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#