CSS3动画速度悬停后不正确的Webkit浏览器

Question

很难解释我正在努力解决的问题。我已经做了一个非常简单的JSFiddle来帮助。

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;
}

基本上一切都像我希望的那样在Firefox中工作，当你把鼠标悬停在背景上时，它会滚动过去，如果你把鼠标拿开，它会以相同的速度恢复，即使动画还没有完成。然而，在Safari/Chrome中，它会在同一时间返回动画，如果动画没有完成，那么速度会慢得多，如果你不明白，当你看到它时你就会明白我的意思。基本上有一个简单的修复这个通过CSS还是我需要写一些Javascript来修复这个?

谢谢!亚历克斯

Answer 1

只需将过渡时间添加到:hover类中。

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

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