CSS animation doesn't restart when resetting class

The problem is that, even though you remove and then re-apply the animated class, you do this in the course of a single, blocking function. When your function exits, it appears to the rendering engine that nothing has changed.

One solution (the one that you chose), is to clone the element and destroy the original. This is fine, but if you had any event bindings to the original element (i think) they they will be destroyed too.

Another approach is to remove the animated class from the element, and then wrap the code that re-applies the class inside of a setTimeout() call with a very small delay, e.g.

$('#holder').removeClass('shader');
setTimeout(
    function(){$('#holder').addClass('shader')}
    , 1);

I've tweaked your jsfiddle to use this approach: http://jsfiddle.net/HuFBN/7/

According to a 2011 article on css-tricks.com, triggering a reflow in between removing and adding the class will restart the animation. Example (verbose):

$('#holder').removeClass('shader');
$('#holder').offsetWidth = $('#holder').offsetWidth; // triggers reflow
$('#holder').addClass('shader'); // restarts animation

I think I figured it out. According to this, css animation can't get applied to the same node twice (even if you have a different animation!). So I had to clone the node, remove the original, and add back the cloned node.