jquery remove class after css animation played?

Question

I have the css code:

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

and just play once when entered the website

but the problem is while the animation done

the buttons in my site isn't works

how can I remove the body class "start" after animation done

or remove class delay x seconds after animation played?

Answer 1

You can bind to the transitionend event (to all of them, actually):

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

If you want to implement a delay, you can queue() the class removal 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 since jQuery 1.7, if you are using an older release you will have to use bind() instead for the code above to work.

Answer 2

Try

webkitAnimationEnd oanimationend msAnimationEnd animationend

instead of

transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd

This worked for me.