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

Question

我想要爲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/

Answer 1

如果設置

background-size: cover; 

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

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

background-size: 7800px 701px;