如何在Android WebView中减少启动CSS动画/过渡的延迟？

Question

我正尝试在Android WebView中使用CSS3动画，但在开始动画时遇到了非常恼人的延迟(大约500ms)。

动画运行流畅，没有延迟，但在开始时有延迟。由于没有延迟，我认为这不是性能问题。或者有可能是这样？

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

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

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

PS:我正在尝试运行的动画/过渡是带有transform: translateX()属性的。之前，我尝试使用left: Xpx，但它在动画过程中出现了延迟。使用transform时，没有延迟，但有延迟。

Answer 1

我也有同样的问题，也没能找到一个合理的解决方案。我尝试过不同的方法，以下是我的结论：

将动画设置得更长会使动画看起来更流畅，但不会减少beginning

• turning硬件加速关闭时的延迟使动画更快(延迟也会减少)，但有些帧正在被丢弃，动画不平滑所有事件到anymore

• changing translateX/translateY/translateZ - no translate3d difference

• changing动画到通过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;

这应该会平滑动画，使它们更快地开始，并消除动画之前和之后的闪烁。