CSS3 : affichages différents webkit/moz

Fermé
Yannick - Modifié par Yannick le 9/02/2012 à 16:11
 Yannick - 10 févr. 2012 à 10:09
Bonjour,


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
A voir également:

2 réponses

Bjr,

Je te conseille ce lien et surtout ce site :

http://www.alsacreations.com/tuto/lire/873-transitions-css3-animations.html

Bon courage.
0
Je connais bien ce site.
Cependant, je n'y trouve rien concernant mon problème...

J'ai regardé de nouveau certains tuto, et j'ai fini par tomber sur un lien d'un site permettant de voir en live les effets d'un code CSS personnalisé.

J'y ai donc entré mon exemple. Une fois de plus, sous Firefox, l'animation marche parfaitement bien, et sous Chrome, avec exactement le même code, l'animation clignote...

Voici le lien personnalisé avec mon exemple : http://jsfiddle.net/M3DtS/106/
0