Question

我作为网络前端开发者/ websedigner独立工作，我在Android手机上坚持使用HTML5横幅。在iOS手机和平板电脑，Chrome或Safari上，它运行良好。但是对于Android，动画看起来不错但却一个接一个地消失......

我用Galaxy手机测试过没关系但是有了一个LG Optimus，这个bug就在这里。您可以自己在Android手机上使用此链接进行测试，并告诉我您是否同意该错误？

http://sebastien-baudrier.com/freelance/android/

我的动画代码（你可以看到页面源代码，我把所有东西放在html页面上）：

.bannerHtml5 #text1,.bannerHtml5 #text2,.bannerHtml5 #icon1,.bannerHtml5 #icon2,.bannerHtml5 #icon3,.bannerHtml5 #icon4,.bannerHtml5 #icon5,.bannerHtml5 #button {
    opacity: 0;
    -webkit-animation-duration: 3s;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: both; 
    -webkit-animation-name: fadein;
    -webkit-animation-iteration-count:1;
    /*-webkit-animation: fadein 3s linear 0 2 alternate;*/
}
@-webkit-keyframes fadein { 
    from {opacity: 0;} to {opacity: 1;}
}

.bannerHtml5 #icon1 {-webkit-animation-delay: 0.5s;}
.bannerHtml5 #icon2 {-webkit-animation-delay: 0.8s;}
.bannerHtml5 #icon3 {-webkit-animation-delay: 1.1s;}
.bannerHtml5 #icon4 {-webkit-animation-delay: 1.4s;}
.bannerHtml5 #icon5 {-webkit-animation-delay: 1.7s;}
.bannerHtml5 #text2 {-webkit-animation-delay: 3s;}
.bannerHtml5 #button {-webkit-animation-delay: 3.5s;}

Answer 1

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

如果您的问题与在视图中闪烁的动画元素有关，请将此CSS规则添加到您要设置动画的元素中：

-webkit-backface-visibility: hidden

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

此外，一般来说，移动设备（包括Android）上的动画通过确保使用硬件加速来提高性能。由于硬件加速仅适用于3d动画，因此您可以通过将以下CSS规则添加到要设置动画的元素来“强制”制作3D动画：

-webkit-transform: translateZ(0)

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

<application android:hardwareAccelerated="true">

这些是我在使用PhoneGap为Android开发HTML5应用时遇到的所有问题。

我发现以下博文非常有用：

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

1 个答案: