安卓下的HTML5动画:消失的元素

Question

我作为web前端开发人员/Websedigener独立工作，我在Android手机上被HTML5横幅所困扰。在iOS手机和平板电脑、Chrome或Safari上，它运行得很完美。但在安卓系统中，动画看起来不错，但一个接一个地消失了。。。

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

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中分发，则需要在Android 3.0+的AndroidManifest.xml中启用硬件加速：

<application android:hardwareAccelerated="true">

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

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

• http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/css3-animations-the-hiccups-and-bugs-youll-want-to-avoid/
• http://daneden.me/2011/12/putting-up-with-androids-bullshit/