暂停后 CSS3 动画卡顿/跳跃答案

【问题标题】：CSS3 animation stutters/jumps after being paused暂停后 CSS3 动画卡顿/跳跃
【发布时间】：2013-12-14 00:40:12
【问题描述】：

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

有人经历过吗？

【问题讨论】：

我看了看你的小提琴，玩了一下。对我来说，一切都很顺利。我在 kubuntu 上使用 chromium 25.0.1364.160，JavaScript V8 3.15.11.16
是的，我也遇到了同样的问题——它似乎很快跳回了默认状态，然后继续从中断的地方继续播放动画
我认为这是一个已知的错误——在 Chrome 30.0.1599.69 上看到相同的错误，在动画恢复之前启动状态会闪烁。你并不孤单！
我也能够使用 chrome 重现这一点。
我在 chrome 上（31.0.1650.63 m），工作起来就像一个魅力（它也很酷）

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

对此问题的补充说明：我相信我（当时）通过使用 top/bottom 值而不是 translateY 值解决了这个问题

【讨论】：