Question

很难解释我试图解决的问题。我已经做了一个非常简单的JSFiddle来帮忙。

#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/

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

1 个答案: