这是CSS3动画本身的问题。还有reflow与否的问题。

简单来说，当有使浏览器reflow的操作的时候，动画会被重置，这时就能重复运行，但单单是repaint不行。而修改一个类的动画效果应该是能引起浏览器的reflow的，但是由于chrome等浏览器的优化，在同一个函数块里对同一个元素的cssText进行修改，它会把所有累加再在最后进行修改。而IE则是每一次修改都会。

所以当你在chrome里设断点单步运行时，o_bar.style.cssText="";这句不会起作用。所以你加了延时后又起作用了。

W3C's opition里有句这样的描述。

In order to restart an animation, it must be removed then reapplied.

就是对于这个描述，除了加延时之外还可以用修改元素的宽度、用两个不同名但同样的动画相互替换等方法来达到目的，简单来说就是要引起浏览器的reflow。

还有几点很有意思，对于css动画，它运行结束并不会自动的赋予pause状态，仍旧是running状态。

更多的你可以google一下，关键字是 restart css animation。

animation要考虑兼容性，加上前缀，如下：

-webkit-animation:mymove 0.8s ease 4 alternate forwards; /* Safari 和 Chrome */ -moz-animation:mymove 0.8s ease 4 alternate forwards; /* firefox */

自己试了下，将第二个样式写入用setTimeout（）来延时写入，问题解决。
但是还是不明白为什么会这样，还请知道的大神指点，谢谢！