Starting a css3 animation from js

Question

I just tried doing this and found a solution online adding and removing classes that define the animation to the element in js.

but this method does not work when I try to start the animation again (at least in sololearn Output it does not).

any suggestions?

the Code I tried:
https://code.sololearn.com/W95Qr62hHRg0/?ref=app

Answer 1

Browser can't detect your class change, as you perform changing to 'reset' class just before setting again 'anim' class: technically, browsers consider that there's no change ;P You can fix it, by setting again your 'anim' class inside a setTimeout() call, even with a small delay value, to let time to browser to update the first class changement ('reset') and only then change it again to 'anim' one:

// textHolder.className = "animClass";
setTimeout(function() { this.className="animClass"; }.bind(textHolder),0);