关于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;