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')});
I'm a total noob... couldn't get this to work... i feel bad :'$
Have a fresh tip? Share with Coderwall community!
JavaScript on a page runs with the privileges of that origin. One altered library, tag manager, or snippet can read inputs, change what people see, and call your APIs as the user.
Security insights from Cside