關於100％寬度/高度背景的CSS3關鍵幀動畫

我想要爲100％寬度和高度的元素設置動畫背景。這是一個簡單的CSS3動畫，使用步驟來瀏覽精靈圖像。關於100％寬度/高度背景的CSS3關鍵幀動畫

動畫看起來是這樣的：

.play-intro{animation: play 2s steps(6);} 
@keyframes play { 
from { background-position: 0 0 ; } 
to { background-position:  -7800px 0 } 
}

的問題是，我看到每個精靈的變化，它不工作，因爲它應該是。我不知道，但我相信這可能是由於背景大小：封面屬性。對此有何建議？

我創建了一個小提琴重現該問題： http://jsfiddle.net/QKwjM/1/

而且這是在全屏小提琴，這個問題最好是看到那裏。 http://jsfiddle.net/QKwjM/1/embedded/result/

2014-01-18 suludi

的問題是，你看到每個精靈的變化？我認爲改變精靈就是你想要達到的目標！如果我理解你是對的，那麼問題在於動畫似乎以任何方式「滯後」。您是否嘗試設置百分比/步數值而不是從/到？ – androidavid

它應該是平滑的動畫。這就是我使用關鍵幀動畫的原因。看到這個例子http://jsfiddle.net/simurai/CGmCe/ – suludi

@Adrift現在它就像一個滑塊，這不是我想要的行爲。你可以檢查小提琴上面的兩條評論或這個鏈接http://davidwalsh.name/firefox-animation，只需點擊查看演示，它也是基於步驟的。 – suludi

如果設置

background-size: cover;

背景大小是可變的（調整到空間），並且打破了動畫。

由於您的最後一個關鍵是-7800px，背景大小，x必須正是

background-size: 7800px 701px;

2014-01-18 20:52:33 vals

是的，你說得對。但是現在我獲得了701px的高背景。所以，基本上不可能以100％的身高和背景大小來做我想要的：封面？ – suludi

回答