Animation qui fait disparaitre mes images sous Chrome

Re-Bonjour à tous les membres de ce forum ...

Aujourd'hui je viens vers vous car j'ai besoin d'un peu d'aide (pour changer )

Mon site : http://eltakos.free.fr

J'ai crée une petite "animation" (je connais pas le terme exacte avec le keyframe) avec un transform : rotate.

On peux voir cette animation en passant la souris sur le logo de droite (rouge) ou sur les vignettes d'une catégorie. Elle consiste à faire bouger avec une rotation d'1px de droite-gauche assez rapidement.

Seulement voila lors de mes testes sous différents navigateurs je tombe sur plusieurs résultat (logique) :

Safari : Parfait comme d'habitude
Chrome : À mon grand étonnement l'animation a bien lieu mais la moitié de l'image disparait.
FF 3.6 & IE 7 : Aucune animation (pas trop grave encore, "tant pis" pour ces utilisateurs, même si c'est la majorité )

Mon CSS :

@-webkit-keyframes vibre
{
	0%	{	-webkit-transform: rotate(1deg);
			-moz-transform: rotate(1deg);
			-o-transform: rotate(1deg);
			-ms-transform: rotate(1deg);	}

	50%	{	-webkit-transform: rotate(-1deg);
			-moz-transform: rotate(-1deg);
			-o-transform: rotate(-1deg);
			-ms-transform: rotate(-1deg);	}
			
	100%	{	-webkit-transform: rotate(1deg);
			-moz-transform: rotate(1deg);
			-o-transform: rotate(1deg);
			-ms-transform: rotate(1deg);	}
}

#Cadre img:hover
{
	-webkit-animation: vibre 0.2s infinite ease-in-out;
}

Si quelqu'un sait pourquoi, sa réponse est la bienvenue
Modifié par sonizef (13 Jun 2012 - 10:37)

Hello,

Ton code doit aussi être préfixé pour tes @keyframes, comme ceci: (et tu peux d'ailleurs mettre 0% et 100% sur la même ligne (from et to)

@-webkit-keyframes vibre{
from, to	{	-webkit-transform: rotate( 1deg);}
50%	        {	-webkit-transform: rotate(-1deg);}
}
@-moz-keyframes vibre{
from, to	{	-moz-transform: rotate( 1deg);}
50%	        {	-moz-transform: rotate(-1deg);}
}
@-ms-keyframes vibre{
from, to	{	-ms-transform: rotate( 1deg);}
50%	        {	-ms-transform: rotate(-1deg);}
}
@-o-keyframes vibre{
from, to	{	-o-transform: rotate( 1deg);}
50%	        {	-o-transform: rotate(-1deg);}
}
@keyframes vibre{
from, to	{	transform: rotate( 1deg);}
50%	        {	transform: rotate(-1deg);}
}

Ah oui ! Je vais essayer ça ! Merci

EDIT : Toujours le même problème
Modifié par sonizef (13 Jun 2012 - 10:03)

Si quelqu'un peux essayer mon site sous Chrome et qu'il voit le problème ça serait cool ^^'
Modifié par sonizef (13 Jun 2012 - 10:05)

Petit
Modifié par sonizef (13 Jun 2012 - 10:06)