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;

background-size是可变的（调整到空格）并且会破坏动画。

由于您的上一个关键帧是-7800px，因此background-size-x必须与

完全相同

background-size: 7800px 701px;