在Webkit瀏覽器中懸停後CSS3動畫速度不正確

難以解釋我正試圖解決的問題。我做了一個非常簡單的JSFiddle來幫助。在Webkit瀏覽器中懸停後CSS3動畫速度不正確

#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來解決這個問題？

謝謝！ Alex

來源

2014-06-26 alexemorris

Whre是小提琴？ – Mark

不應該需要任何js來解決這個問題。 – Mark

希望不是！我試圖忍受它，因爲它是我想象的js可能會涉及 – alexemorris

只需將過渡時間添加到您的：hover類。

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

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

來源

2014-06-26 19:38:16 Mark

，似乎並沒有解決它對我來說，我認爲時間將需要調整，取決於用戶是多久徘徊。但Firefox似乎爲你做了這個計算。 – alexemorris

也許我不清楚，你是否希望它恢復到原來的速度？ – Mark

你使用的是什麼版本的Chrome，我在Chrome瀏覽器上測試了這個，safari，也就是說，一切正常。 – Mark

在Webkit瀏覽器中懸停後CSS3動畫速度不正確

回答

相關問題