Android下的动画HTML5：消失的元素

我像web前端开发人员/web浏览器一样独立工作，我被Android手机上的HTML5横幅绊住了。在iOS手机和平板电脑、Chrome或Safari上，它运行得非常完美。但在安卓系统中，动画看起来不错，但却一个接一个地消失了

我用Galaxy手机进行了测试，结果还可以，但LG Optimus的错误就在这里。你能在你的安卓手机上用这个链接自己测试一下，然后告诉我你是否同意这个错误吗

我的动画代码（你可以看网页源代码，我把一切都放在html网页上）：

---

欢迎来到Android上令人困惑的CSS3动画世界

如果您的问题与在视图内外闪烁的动画元素有关，请将此CSS规则添加到正在制作动画的元素中：

-webkit-backface-visibility: hidden

-webkit-transform: translateZ(0)

请记住，在较旧的Android手机（4.0之前）上，如果对多个属性设置动画，动画完成时元素将消失。确保在任何时候仅为单个属性设置动画

另外，一般来说，移动设备（包括Android）上的动画通过确保使用硬件加速来表现得更好。由于硬件加速仅对三维动画启用，因此可以通过向正在制作动画的元素添加以下CSS规则来“强制”三维动画：

-webkit-backface-visibility: hidden

-webkit-transform: translateZ(0)

还要注意，如果您将应用程序包装在本机容器中，以便在Google Play中分发，则需要在Android 3.0+的AndroidManifest.xml中启用硬件加速：

<application android:hardwareAccelerated="true">

欢迎来到Android上复杂的CSS3动画世界

如果您的问题与在视图内外闪烁的动画元素有关，请将此CSS规则添加到正在制作动画的元素中：

-webkit-backface-visibility: hidden

-webkit-transform: translateZ(0)

请记住，在较旧的Android手机（4.0之前）上，如果对多个属性设置动画，动画完成时元素将消失。确保在任何时候仅为单个属性设置动画

另外，一般来说，移动设备（包括Android）上的动画通过确保使用硬件加速来表现得更好。由于硬件加速仅对三维动画启用，因此可以通过向正在制作动画的元素添加以下CSS规则来“强制”三维动画：

-webkit-backface-visibility: hidden

-webkit-transform: translateZ(0)

还要注意，如果您将应用程序包装在本机容器中，以便在Google Play中分发，则需要在Android 3.0+的AndroidManifest.xml中启用硬件加速：

<application android:hardwareAccelerated="true">



这很有趣，但webkit transform hack（我用来解决另一个触摸传播问题）实际上导致了这个问题闪烁/重画问题-奇怪。我得说，现在已经完成了移动网络开发，我再也不会抱怨IE8了（…几乎永远不会）这很有趣，但webkit transform hack（我用来解决一个不同的触摸传播问题）实际上导致了这个问题闪烁/重画问题-奇怪。我得说，现在已经完成了移动网络开发，我再也不会抱怨IE8了（…几乎永远不会）