CSS animation doesn't restart when resetting class

Question

I am using CSS shader + animation. My shader class is defined as follows:

.shader{
-webkit-filter :custom(url(v.vs) mix(url(f.fs) multiply destination-over),         


        

Answer 1

You definitely have to remove class that contains animation and then add it again. It should also work without .offsetWidth . It worked for me. So

$('#id').removeClass('animationClass');
$('#id').addClass('animationClass'); // starts animation again

should do the trick.

Answer 2

You need to recreate your element.

function resetAnimation(jqNode) {
   var clone = jqNode.clone();
   jqNode.after( clone );
   jqNode.remove();
   jqNode[0] = clone[0];
}

Answer 3

way to trigger a reflow:

  element.classList.remove("class");
  element.scrollBy(0, 0);
  element.classList.add("class");

works in strict mode! doesn't require a write operation on a read-only value! doesn't require a whole new function! one line and go! :)

Answer 4

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/

Answer 5

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

Answer 6

Try using this just after you apply the animation - given that "e" is your animated element:

e.outerHTML = e.outerHTML;