アニメーションHTML5 under Android：消える要素

Question

私はWebフロントエンドdevelopper/websedignerとは独立しています。私はAndroid携帯でHTML5のバナーにくっついています。 iOSの携帯電話とタブレット、Chrome、Safariの場合は完全に動作しています。しかし、Androidでは、アニメーションはうまく表示されますが、次々に消える...

私はギャラクシーの携帯電話でテストしましたが、それは問題ありませんでしたが、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アニメーションの厄介な世界へようこそ！

あなたの問題は、ビューの中と外のちらつきアニメーション要素をどうあなたがアニメーション化されている要素に、このCSSルールを追加する必要がある場合：

-webkit-backface-visibility: hidden 

4.0より前に（古いAndroid携帯電話上のことに注意してください）、複数のプロパティをアニメートすると、アニメーションが完了すると要素が消えます。一度に1つのプロパティをアニメートするだけであることを確認してください。

また、モバイルデバイス（Androidを含む）のアニメーションは、一般的に、ハードウェアアクセラレーションを使用することでパフォーマンスが向上します。ハードウェアアクセラレーションにのみ、3Dアニメーションのために有効になっているので、あなたがアニメーション化されている要素に次のCSSルールを追加することにより、3Dアニメーションを「強制」することができます

-webkit-transform: translateZ(0) 

はまた用心あなたはネイティブコンテナ内のアプリを包む場合にグーグルで配布再生のために、あなたは、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/