今天在用cssText写入样式时遇到的一个问题，具体如下：
代码：
o_bar.onclick=function(){
o_bar.style.cssText="";
o_bar.style.cssText="background:red;animation:mymove 0.8s ease 4 alternate forwards";
};问题：点击时只有ie下是清除了样式然后重新写入重新执行动画，而火狐和chrome下直接执行动画了并没有重新写入没有重新执行动画？纠结了好久不知道怎么会这样子，希望知道的朋友帮帮忙，谢谢！
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
这是CSS3动画本身的问题。还有reflow与否的问题。
简单来说，当有使浏览器reflow的操作的时候，动画会被重置，这时就能重复运行，但单单是repaint不行。而修改一个类的动画效果应该是能引起浏览器的reflow的，但是由于chrome等浏览器的优化，在同一个函数块里对同一个元素的cssText进行修改，它会把所有累加再在最后进行修改。而IE则是每一次修改都会。
所以当你在chrome里设断点单步运行时，o_bar.style.cssText="";这句不会起作用。所以你加了延时后又起作用了。
W3C's opition里有句这样的描述。
就是对于这个描述，除了加延时之外还可以用修改元素的宽度、用两个不同名但同样的动画相互替换等方法来达到目的，简单来说就是要引起浏览器的reflow。
还有几点很有意思，对于css动画，它运行结束并不会自动的赋予pause状态，仍旧是running状态。
更多的你可以google一下，关键字是 restart css animation。
animation要考虑兼容性，加上前缀，如下：
自己试了下，将第二个样式写入用setTimeout（）来延时写入，问题解决。
但是还是不明白为什么会这样，还请知道的大神指点，谢谢！