android - Android下的动画HTML5 : disappearing elements

Question

我的工作与网络前端开发人员/websedigner 一样独立，而且我在 Android 手机上使用 HTML5 横幅广告。在 iOS 手机和平板电脑、Chrome 或 Safari 上，它运行完美。但是对于 Android，动画看起来不错，但一个接一个地消失了......

我用 Galaxy 手机测试没问题，但在 LG Optimus 手机上却出现了错误。您能否在您的 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 动画世界!

如果您的问题与动画元素在 View 中闪烁和闪烁有关，请将此 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/