Animation HTML5 sous Android : les elements disparaissent

Bonjour à tous,


J'ai un souci CSS3 sur des bannières HTML5 pour mon client qui me dit que sous Android les éléments d'anim disparaissent les uns après les autres.... sur iOS phones & tablettes, Chrome ou Safari, c'est parfait.

J'ai testé sur le LG Optimus de mon amie le bug existe bien... Quelqu'un a un Android et pourrait me dire s'il constate le bug ? Voici l'URL pour tester :

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

Avez-vus une idée du problème par hasard ?

Mon code d'animation est le suivant (vous pouvez aussi regarder le code source entier, j'ai mis les CSS sur la page 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;}

A priori Android n'aime pas le opacity:0 déclaré au début de l'animation....j'ai dû tout refaire de manière redondante, et ça marche, mais toujours dans l'espoir de me dire pourquoi


Mon nouveau code tout crado :

/* text 1 fade */
			.bannerHtml5 #text1 {
				opacity: 1;
				-webkit-animation-duration: 3s;
				-webkit-animation-play-state: running;
				-webkit-animation-fill-mode: both; 
				-webkit-animation-name: fadeinText1;
				-webkit-animation-iteration-count:1;
				/*-webkit-animation: fadein 3s linear 0 2 alternate;*/
			}
			@-webkit-keyframes fadeinText1 { 
			  	0% {opacity: 0;}			  	
			  	50% {opacity: 0.5;}
			  	100% {opacity: 1;}
			}
			
			/* icon1 fade */
			.bannerHtml5 #icon1 {
				opacity: 1;
				-webkit-animation-duration: 4s;
				-webkit-animation-play-state: running;
				-webkit-animation-fill-mode: both; 
				-webkit-animation-name: fadeinIcon1;
				-webkit-animation-iteration-count:1;
				/*-webkit-animation: fadein 3s linear 0 2 alternate;*/
			}
			@-webkit-keyframes fadeinIcon1 { 
			  	0% {opacity: 0;}
			  	10% {opacity: 0;}
			  	20% {opacity: 0;}
			  	30% {opacity: 0;}
			  	40% {opacity: 0.5;}
			  	50% {opacity: 1;}
			  	60% {opacity: 1;}
			  	70% {opacity: 1;}
			  	80% {opacity: 1;}
			  	90% {opacity: 1;}
			  	100% {opacity: 1;}
			}
			
			/* icon2 fade */
			.bannerHtml5 #icon2 {
				opacity: 1;
				-webkit-animation-duration: 5s;
				-webkit-animation-play-state: running;
				-webkit-animation-fill-mode: both; 
				-webkit-animation-name: fadeinIcon1;
				-webkit-animation-iteration-count:1;
				/*-webkit-animation: fadein 3s linear 0 2 alternate;*/
			}
			@-webkit-keyframes fadeinIcon1 { 
			  	0% {opacity: 0;}
			  	10% {opacity: 0;}
			  	20% {opacity: 0;}
			  	30% {opacity: 0;}
			  	40% {opacity: 0.5;}
			  	50% {opacity: 1;}
			  	60% {opacity: 1;}
			  	70% {opacity: 1;}
			  	80% {opacity: 1;}
			  	90% {opacity: 1;}
			  	100% {opacity: 1;}
			}
			
			/* icon3 fade */
			.bannerHtml5 #icon3 {
				opacity: 1;
				-webkit-animation-duration: 6s;
				-webkit-animation-play-state: running;
				-webkit-animation-fill-mode: both; 
				-webkit-animation-name: fadeinIcon1;
				-webkit-animation-iteration-count:1;
				/*-webkit-animation: fadein 3s linear 0 2 alternate;*/
			}
			@-webkit-keyframes fadeinIcon1 { 
			  	0% {opacity: 0;}
			  	10% {opacity: 0;}
			  	20% {opacity: 0;}
			  	30% {opacity: 0;}
			  	40% {opacity: 0.5;}
			  	50% {opacity: 1;}
			  	60% {opacity: 1;}
			  	70% {opacity: 1;}
			  	80% {opacity: 1;}
			  	90% {opacity: 1;}
			  	100% {opacity: 1;}
			}
			
			/* icon4 fade */
			.bannerHtml5 #icon4 {
				opacity: 1;
				-webkit-animation-duration: 7s;
				-webkit-animation-play-state: running;
				-webkit-animation-fill-mode: both; 
				-webkit-animation-name: fadeinIcon1;
				-webkit-animation-iteration-count:1;
				/*-webkit-animation: fadein 3s linear 0 2 alternate;*/
			}
			@-webkit-keyframes fadeinIcon1 { 
			  	0% {opacity: 0;}
			  	10% {opacity: 0;}
			  	20% {opacity: 0;}
			  	30% {opacity: 0;}
			  	40% {opacity: 0.5;}
			  	50% {opacity: 1;}
			  	60% {opacity: 1;}
			  	70% {opacity: 1;}
			  	80% {opacity: 1;}
			  	90% {opacity: 1;}
			  	100% {opacity: 1;}
			}
			
			/* icon5 fade */
			.bannerHtml5 #icon5 {
				opacity: 1;
				-webkit-animation-duration: 8s;
				-webkit-animation-play-state: running;
				-webkit-animation-fill-mode: both; 
				-webkit-animation-name: fadeinIcon1;
				-webkit-animation-iteration-count:1;
				/*-webkit-animation: fadein 3s linear 0 2 alternate;*/
			}
			@-webkit-keyframes fadeinIcon1 { 
			  	0% {opacity: 0;}
			  	10% {opacity: 0;}
			  	20% {opacity: 0;}
			  	30% {opacity: 0;}
			  	40% {opacity: 0.5;}
			  	50% {opacity: 1;}
			  	60% {opacity: 1;}
			  	70% {opacity: 1;}
			  	80% {opacity: 1;}
			  	90% {opacity: 1;}
			  	100% {opacity: 1;}
			}
			
			/* text2 fade */
			.bannerHtml5 #text2 {
				opacity: 1;
				-webkit-animation-duration: 9s;
				-webkit-animation-play-state: running;
				-webkit-animation-fill-mode: both; 
				-webkit-animation-name: fadeinIcon1;
				-webkit-animation-iteration-count:1;
				/*-webkit-animation: fadein 3s linear 0 2 alternate;*/
			}
			@-webkit-keyframes fadeinIcon1 { 
			  	0% {opacity: 0;}
			  	10% {opacity: 0;}
			  	20% {opacity: 0;}
			  	30% {opacity: 0;}
			  	40% {opacity: 0.5;}
			  	50% {opacity: 1;}
			  	60% {opacity: 1;}
			  	70% {opacity: 1;}
			  	80% {opacity: 1;}
			  	90% {opacity: 1;}
			  	100% {opacity: 1;}
			}
			
			/* button fade */
			.bannerHtml5 #button {
				opacity: 1;
				-webkit-animation-duration: 10s;
				-webkit-animation-play-state: running;
				-webkit-animation-fill-mode: both; 
				-webkit-animation-name: fadeinIcon1;
				-webkit-animation-iteration-count:1;
				/*-webkit-animation: fadein 3s linear 0 2 alternate;*/
			}
			@-webkit-keyframes fadeinIcon1 { 
			  	0% {opacity: 0;}
			  	10% {opacity: 0;}
			  	20% {opacity: 0;}
			  	30% {opacity: 0;}
			  	40% {opacity: 0.5;}
			  	50% {opacity: 1;}
			  	60% {opacity: 1;}
			  	70% {opacity: 1;}
			  	80% {opacity: 1;}
			  	90% {opacity: 1;}
			  	100% {opacity: 1;}
			}