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

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/