jquery remove class after css animation played?

Try

webkitAnimationEnd oanimationend msAnimationEnd animationend

instead of

transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd

This worked for me.


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.