CSS animation doesn't restart when resetting class

Issue

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), 200 200);
-webkit-animation-name: test;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 1
}

I am trying to set/unset the styles(shader+animation) dynamically using jquery through $('#holder').addClass('shader'); and $('#holder').removeClass('shader');

However, the weird thing is when I reset the class (e.g., calling addClass after removeClass), only the shader gets reapplied but the animation doesn't (I have hooked the AnimationStart event to see when my animation starts). Anyone know why this is the case and how I can solve it?

Edit: I added a simplified version of JSfiddle snippet here. Essentially I'm re-applying the animation to a div twice but the actual animation only gets called the first time.

Solution

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.

Answered By - Discombobulous