Question

我正在尝试在Android WebView中使用CSS3动画，但是在启动动画时（大约500毫秒）我会遇到非常恼人的延迟。

动画运行平稳，无滞后，但开始时有延迟。由于没有滞后，我认为这不是性能问题。或者它可能是？

这不是默认的300ms onclick延迟，我已经改为ontouchstart，当我做除了动画/过渡之外的任何事情时，没有延迟。只有这两个。

这也不是动画延迟属性，我已经将它设置为0。

任何可能的解释/解决方案？

PS：我正在尝试运行的动画/转换是transform: translateX()属性。之前，我正在尝试left: Xpx，但它在动画期间落后了。通过变换，没有滞后，但存在延迟。

Answer 1

我遇到了同样的问题，未能找到合理的解决方案。我尝试了不同的方法，这些是我的结论：

使动画更长时间使其看起来更平滑，但不会减少开头的延迟
将硬件加速设置为OFF会使动画更快（延迟也会减少），但有些帧会被丢弃，动画也不再平滑
将所有translate3d更改为translateX / translateY / translateZ - 没有视觉差异
将动画更改为通过JavaScript控制的多个过渡（transitionEnd事件），在途中遇到多次打嗝时会慢一些（每次transitionEnd被触发时）。

我的猜测是，CSS动画在Android上速度很慢，需要一些预先计算来显示它们;因此在开始时的延迟。我们可能需要等待Chrome成为Android的默认浏览器。

Answer 2

我不确定它会对延迟有所帮助，但也许您应该使用translate3d(x,0,0)而不是translateX，因为3D转换会在硬件上运行。

我现在找不到相关的参考资料，但我记得在Google Android HTML开发者网站上阅读了一篇关于它的文章。

Answer 3

我在股票浏览器上遇到了同样的问题。事实证明，您可以将其添加到您正在制作动画的块中：

-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;

这样可以平滑动画，让它们更快启动，并在动画前后移除闪烁。