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

I'd be happy to hear any criticism with my method using requestAnimationFrame as I don't see anyone else using it:

element.classList.add("class");
window.requestAnimationFrame(() => element.classList.remove("class"));

Answer 2

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.