CODEWITHSUNDEEP
androidhtmlanimationcss
cbastoon
cbastoon

Reputation: 1

Animation HTML5 under Android : disappearing elements

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

Upvotes: 0

Views: 3648

Answers (1)

mattwindwer
mattwindwer

Reputation: 929

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:

Upvotes: 4

Related Questions