title: Animation HTML5 under Android : disappearing elements
body: <p>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...</p>
  
  <p>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 ?</p>
  
  <p><a href="http://sebastien-baudrier.com/freelance/android/" rel="nofollow">http://sebastien-baudrier.com/freelance/android/</a></p>
  
  <p>My animation code (you can watch the page source code, i put everything on html page) :</p>
  
  <pre><code>.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;}
  </code></pre>