100% 宽度/高度背景上的 CSS3 关键帧动画

Question

我正在尝试为 100% 宽和高的元素设置动画背景。这是一个简单的 CSS3 动画，使用步骤遍历 Sprite 图像。

动画看起来像这样:

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

问题是我看到每个 sprite 都发生了变化，它没有按应有的方式工作。我不知道，但我相信这可能是由于 background-size:cover 属性。对此有何建议？

我创建了一个 fiddle 来重现这个问题: http://jsfiddle.net/QKwjM/1/

这是全屏模式下的 fiddle ，最能看出问题所在。 http://jsfiddle.net/QKwjM/1/embedded/result/

Answer 1

如果你设置

background-size: cover;

背景大小是可变的(根据空间调整)，这会破坏动画。

因为你的最后一个关键帧是 -7800px，所以 background-size-x 必须正好是那个

background-size: 7800px 701px;