css - 暂停后 CSS3 动画卡顿/跳跃

Question

我的 CSS 动画声明了一个animation-play-state: pausedon div:hover。问题是（至少在 Chrome 中），当鼠标悬停在元素上时，动画会卡住/跳跃。

这是一个 jsFiddle：http: //jsfiddle.net/AHqLE/

有没有人经历过这个？

Answer 1

尝试添加-webkit-transform: translateZ(0);或-webkit-transform: translate3d(0,0,0);强制硬件加速。我将它添加到我使用的任何过渡或动画中，这样 Chrome 就不会留下痕迹。

Answer 2

我可以确认这现在适用于最新的 Chrome 版本（版本 31.0.1650.63）

对此问题的附加说明：我相信我（当时）通过使用top/bottom值而不是translateY值来解决它