Vitesse d'animation CSS3 après hover pas droit dans les navigateurs Webkit

Question

Il est difficile d'expliquer le problème que j'essaie de résoudre. J'ai fait un JSFiddle très simple pour aider.

http://jsfiddle.net/8Njmz/1/

#image { 
    width:400px; 
    height:400px; 
    background-image:url('http://th07.deviantart.net/images3/PRE/i/2004/142/8/b/Tileable_Checkered_Floor.jpg'); 
    background-size:150%; 
    background-position:left center; 
    transition:5s linear; 
    -moz-transition:5s linear; 
    -webkit-transition:5s linear; 

} 

#image:hover { 
    background-position:right center; 
} 

Fondamentalement, tout fonctionne comme je le voudrais dans Firefox, lorsque vous passez la souris sur les rouleaux de fond à travers, et si vous prenez votre souris loin si Revient à la même vitesse , même si l'animation n'était pas terminée. Cependant dans Safari/Chrome il s'anime en même temps, tellement plus lent si l'animation n'était pas terminée, si vous ne comprenez pas, vous verrez ce que je veux dire quand vous le verrez. Fondamentalement est-il une solution simple pour cela à travers CSS ou vais-je besoin d'écrire du Javascript pour résoudre ce problème?

Merci! Alex

Answer 1

Ajoutez simplement l'heure de transition à votre classe: hover.

#image:hover { 
    background-position:right center; 
    -moz-transition:2s linear; 
    -webkit-transition:2s linear; 
} 

http://jsfiddle.net/8Njmz/2/