如何用css3動畫更改背景位置？

Question

可以說我有一個div元素，在position: 0%;背景我將如何改變到如position: 100%;的位置，但與懸停關鍵幀

我似乎無法正常使用關鍵幀，它永遠不會奏效，我都最新的瀏覽器。

謝謝。

Answer 1

如果您只是想在懸停時爲背景位置設置動畫效果，則使用過渡而非關鍵幀動畫更容易。看這個小提琴的例子：http://jsfiddle.net/hfXSs/

如果你想把它做成一個動畫的額外努力，你必須將div的動畫播放狀態設置爲'已暫停'並將其更改爲'運行'懸停。看到這裏暫停動畫規範：http://dev.w3.org/csswg/css3-animations/#the-animation-play-state-property-

編輯：我很無聊，所以這裏是一個使用關鍵幀動畫，同樣的事情：http://jsfiddle.net/wGRg5/

顯然，撥弄了，當你沒有懸停在這個問題div中動畫暫停可能不是預期的效果。

Answer 2

Some Code，在這個時間點看起來像webkit。

.box { 
    display:block; 
    height:300px; 
    width:300px; 
    background:url('http://lorempixum.com/300/300') no-repeat; 
    background-position:-300px; 
    -webkit-transition:background-position 1s ease; 
} 

.box:hover{ 
    background-position:0px; 
} 

途經：http://jsfiddle.net/hfXSs/

這裏更多：http://css-tricks.com/parallax-background-css3/