Last Updated: February 25, 2016
·
24.33K
· 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 ·

Have a fresh tip? Share with Coderwall community!

Post
Post a tip
Did you know?

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