Android的下动画HTML5：消失的元素 [英] Animation HTML5 under Android : disappearing elements

问题描述

我作为独立的Web前端developper / websedigner工作，我stucked与Android手机HTML5横幅。在iOS手机和平板电脑，Chrome或Safari浏览器，它运行完美。但与Android，动画都出现不错，但对方后消失1 ...

我用手机银河它是确定的，但与LG擎天柱这个bug在这里进行测试。你能自己使用这个链接测试你的Andr​​oid手机上，并告诉我，如果你用BUG同意吗？

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

我的动画code（你可以看网页的源文件code，我把一切HTML页面上）：

  .bannerHtml5＃文本1，.bannerHtml5＃文本2，.bannerHtml5＃ICON1，.bannerHtml5＃图标2，.bannerHtml5＃ICON3，.bannerHtml5＃图标4，.bannerHtml5＃icon5，.bannerHtml5＃按钮{
    不透明度：0;
    -webkit-动画持续时间：3秒;
    -webkit-动画播放状态：运行;
    -webkit-动画填充模式：两者;
    -webkit-动画名称：淡入;
    -webkit-动画迭代计数：1;
    / *  -  WebKit的动画：淡入3秒线性0 2备用; * /
}
@ -webkit-关键帧淡入{
    从{不透明：0;}到{不透明度：1;}
}.bannerHtml5＃{ICON1 -webkit-动画延迟：0.5S;}
.bannerHtml5＃图标2 {-webkit-动画延迟：0.8S;}
.bannerHtml5＃{ICON3 -webkit-动画延时：1.1s;}
.bannerHtml5＃图标4 {-webkit-动画延迟：1.4S;}
.bannerHtml5＃icon5 {-webkit-动画延迟：1.7S;}
.bannerHtml5＃{文本2 -webkit-动画延时：3秒;}
.bannerHtml5＃键{-webkit-动画延迟：3.5秒;}
 

解决方案

欢迎到CSS3动画Android上的错综复杂的世界！

如果您的问题与动画元素和淡出视野忽隐忽现做的，添加此CSS规则，你是动画元素：

  -webkit-背面能见度：隐藏
 

请记住，在老式的Andr​​oid手机（之前为4.0），元素会在你的动画多单属性的更多动画完成消失。确保你只在任何一个时间动画的一个属性。

此外，在移动设备（包括Android）一般动画执行，确保它们使用硬件加速更好。

：由于硬件加速的3D动画才启用，您可以通过添加下面的CSS规则要为其制作动画元素力3D动画

  -webkit-变换：translateZ（0）
 

另外要注意，如果你换你的应用程序在本地容器在谷歌Play发布，则需要启用硬件加速在AndroidManifest.xml中为Android 3.0 +

 ＆lt;应用机器人：hardwareAccelerated =真正的＆GT;
 

这是我碰到了，同时为使用PhoneGap的Andr​​oid版的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与 - 机器人 - 废话/

I work as independant as web front end developper / websedigner and i'm stucked with HTML5 banners on Android phones. On iOS phones and tablets, Chrome or Safari, it's running perfectly. But with Android, the animations are appearing nice but disappear one after the other...

I tested with a Galaxy phone it was OK but with an LG Optimus the bug was here. Can you test by yourself with this link on your android phone and tell me if you agree with the bug ?

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

My animation code (you can watch the page source code, i put everything on html page) :

.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;}

解决方案

Welcome to the perplexing world of CSS3 animations on Android!

If your issue has to do with animated elements flickering in and out of view, add this CSS rule to the element you are animating:

-webkit-backface-visibility: hidden

Keep in mind that on older Android phones (prior to 4.0), elements will disappear when the animation completes if you animate more than a single property. Ensure that you are only animating a single property at any one time.

Also in general animations on mobile devices (including Android) perform better by ensuring they use hardware acceleration. Since hardware acceleration is only enabled for 3d animations, you can "force" a 3d animation by adding the following CSS rule to the element you are animating:

-webkit-transform: translateZ(0)

Also beware that if you wrap your app in a native container for distribution in Google Play, you will need to enable hardware acceleration in your AndroidManifest.xml for Android 3.0+:

<application android:hardwareAccelerated="true">

These are all issues I ran into while developing an HTML5 app for Android using PhoneGap.

I've found the following blog posts to be incredibly useful:

• 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/

这篇关于Android的下动画HTML5：消失的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！