Problème de transition (Grossir une image) CSS3

Bonjour,

J'ai un petit code css3 que j'avais utilisé dans un projet pour que mon logo grossit au survol de la souris. Tout fonctionnait sur ce projet en question. J'ai récupéré le code pour un site dont je travail actuellement, mais le tout fonctionne à 50%. En fait au survol, l'image grossit bien, mais lorsque la souris quitte l'image en question. L'effet de transition coupe raide, c'est-à-dire que l'image revient à sa position initiale mais c'est décalé.

Avez-vous une idée du problème?

div#logo a img {
	width:268px; 
	z-index:100; 

	text-decoration:none; border:0px; 
 	transform-origin:center center;
       -webkit-transition: all .5s linear;
	-moz-transition: all .5s linear;
   	-o-transition: all .5s linear;
  	 transition: all .5s linear;
	}

div#logo a img:hover {
	-webkit-transform: scale(1.2);
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	transform: scale(1.1);
	
	-moz-transition:all 0.6s ease-in-out; 
	-webkit-transition:all 0.6s ease-in-out;
	-o-transition:all 0.6s ease-in-out;
	transition:all 0.6s ease-in-out;
	}

Merci!
Modifié par sydgie (18 Nov 2013 - 19:12)

En enlevant la propriété transition de l'état hover (et en ne l'utilisant que sur l'état par défaut), ca marche beaucoup mieux
http://jsfiddle.net/6E3CX/

Pour plus de contrôle sur les transitions n'hésite pas à utiliser http://cubic-bezier.com

PS: dans un autre ordre d'idée, il serait peut-être plus intéressant de réduire l'image de base pour ne pas perde en qualité lors du zoom qui afficherait l'image en taille normale (car l'image se floute légèrement en zoomant dessus): http://jsfiddle.net/6E3CX/1/
Modifié par LuciferX (19 Nov 2013 - 05:51)