如何减少Android WebView中启动CSS动画/转换的延迟？

我试图在Android WebView中使用CSS3动画，但在启动动画时遇到了一个非常恼人的延迟（大约500毫秒）

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

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

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

有什么可能的解释/解决办法吗

---

PS：我尝试运行的动画/转换是使用

transform:translateX（）

属性的。以前，我试着使用

left:Xpx

，但在动画中它是滞后的。对于transform，没有延迟，但有延迟。

我不确定它是否有助于延迟，但也许您应该使用

translate3d（x，0,0）

而不是

translateX

，因为3D转换在硬件上运行

---

我现在找不到这方面的参考资料，但我记得在谷歌Android HTML开发者网站上读过一篇关于这方面的文章。

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

• 使动画变长会使其看起来更平滑，但不会减少开始时的延迟
• 禁用“硬件加速”（hardware acceleration）会使动画速度加快（延迟也会减少），但某些帧会被删除，动画不再平滑
• 将所有

  translate3d

  更改为

  translateX

  /

  translateY

  /

  translateZ

  -无视觉差异
• 通过JavaScript（

  transitionEnd

  event）将动画更改为多个过渡，会使动画速度变慢，同时会出现多个打嗝（每次触发

  transitionEnd

  时）

---

我的猜测是CSS动画在Android上运行缓慢，需要一些预计算来显示它们；因此，一开始就出现了延迟。我们可能需要等待Chrome成为Android的默认浏览器。

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

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

---

这将平滑动画，使动画更快开始，并消除动画前后的闪烁。

您使用的是jQuery Mobile吗？不，我没有使用任何框架，只是纯HTML/CSS/JS。您是否找到了解决此问题的方法？Bump。我看到iPad2在运行旧版iOS的时候出现了疯狂的长时间延迟。在开始之前，它似乎在计算几十个元素的变换。然后它运行得非常平稳。您确定只有

translate3d

会加速吗？我认为整个

translate

函数家族都在加速。无论如何，这不是解决这个问题的好办法-我尝试了

translate3d

和

translateX

，但没有发现明显的区别。如果你说你没有看到明显的区别，我想我的建议不是解决你问题的办法。关于是否只有

translate3d

被加速，这是我在几个地方读到的，包括谷歌对正确、更快的CSS的解释。这对我来说也很奇怪，也许它在后来的Chrome版本中被更改了，我不能肯定在所有浏览器中都是这样。尽管我不愿意承认，因为支持旧设备和Android版本仍然是大多数开发者的要求，我们可能只需要回到JavaScript动画，希望有更好的表现。