Jquery remove class after css animation?

Question

I have css code:

body.start{-webkit-animation:srcb ease-in .4s 1;} 

and just play once upon entering the site

but the problem is that the animation is done

buttons on my site do not work

how to remove the body class "start" after the animation

or remove the class delay a few seconds after playing the animation?

Answer 1

You can bind to the transitionend event (actually):

 $("body").on( "transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd", function() { $(this).removeClass("start"); } ); 

If you want to implement a delay, you can queue () do the class delete operation:

 $("body").on( "transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd", function() { $(this).delay(1000).queue(function() { // Wait for 1 second. $(this).removeClass("start").dequeue(); }); } ); 

Note: on () only exists with jQuery 1.7, if you are using an older version, you will have to use bind () instead of the code above.

Answer 2

Try

 webkitAnimationEnd oanimationend msAnimationEnd animationend 

instead

 transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd 

It worked for me.

Answer 3

Perhaps another way?

 $(window).load(function(){ setTimeout(function(){ $('body.start').removeClass('start') }, 4000); }); 

Answer 4

Here is the code:

 var div = document.querySelector('div'); function callback() { div.classList.remove('start'); // or modify div.className } div.addEventListener("webkitAnimationEnd", callback, false); 

Check out this live example on jsbin.

Please note that your animation and my solution only work in webkit-based browsers. In a production environment, you should be aware that other browsers also provide a prefix solution.

Answer 5

 $("#mydiv").removeClass("start", function() { alert("do something"); });