Je rencontre un petit soucis avec le CSS3.
J'ai fait une animation avec des images pour qu'elles apparaissent les unes après les autres à grande vitesse. Pour cela, j'ai joué avec la visibilité de ces dernières dans une animation, et chaque image exécute cette animation en décalé.
Sur Firefox, tout va bien, l'animation fonction. Par contre, sur Chrome et Safari, l'animation clignote. La définition de l'animation est strictement la même dans les deux cas, alors je ne comprends pas pourquoi une telle différence de comportement...
J'ai donc 3 images, avec les id "sound_img1", "sound_img2" et "sound_img3", et le code CSS ci-dessous.
- Définition de l'animation :
@-moz-keyframes sound_img {
0% { visibility:visible; }
33% { visibility:visible; }
34% { visibility:hidden; }
95% { visibility:hidden; }
96% { visibility:visible; }
}
@-webkit-keyframes sound_img {
0% { visibility:visible; }
33% { visibility:visible; }
34% { visibility:hidden; }
95% { visibility:hidden; }
96% { visibility:visible; }
}
- Attache de l'animation aux images (leur conteneur a l'id "sound_animation") :
#sound_animation img {
-moz-animation-name: sound_img;
-moz-animation-duration: 0.3s;
-moz-animation-iteration-count: infinite;
-webkit-animation-name: sound_img;
-webkit-animation-duration: 0.3s;
-webkit-animation-iteration-count: infinite;
}
- Définition des délais :
#sound_img1 {
-moz-animation-delay: 0s;
-webkit-animation-delay: 0s;
}
#sound_img2 {
-moz-animation-delay: 0.1s;
-webkit-animation-delay: 0.1s;
}
#sound_img3 {
-moz-animation-delay: 0.2s;
-webkit-animation-delay: 0.2s;
}
Le plus bizarre, c'est que j'ai commencé par des tests à vitesse réduite (animation sur 6s avec 2s de décalage entre les images), et ça fonctionnait très bien sous Firefox et sous Chrome/Safari. C'est quand je réduis la vitesse que ça se met à clignoter uniquement du côté de Chrome/Safari...
En espérant que quelqu'un pourra m'aider.
Merci
