【发布时间】：2014-01-19 04:52:33
【问题描述】：
我正在尝试为 100% 宽和高的元素的背景设置动画。这是一个简单的 CSS3 动画，使用步骤遍历精灵图像。
动画是这样的：
.play-intro{animation: play 2s steps(6);}
@keyframes play {
from { background-position: 0 0 ; }
to { background-position: -7800px 0 }
}
问题是我看到每个精灵都发生了变化，它没有按应有的方式工作。我不知道，但我相信这可能是由于 background-size:cover 属性。对此有何建议？
我创建了一个小提琴来重新创建问题： http://jsfiddle.net/QKwjM/1/
这是全屏模式的问题，问题在这里最明显。 http://jsfiddle.net/QKwjM/1/embedded/result/
【问题讨论】：
-
问题是你看到每个精灵都改变了吗？我认为改变精灵是你想要实现的目标！？如果我理解正确，问题是动画似乎以任何方式“滞后”。您是否尝试过设置百分比/步长值而不是从/到？
-
应该是流畅的动画。这就是我使用关键帧动画的原因。例如jsfiddle.net/simurai/CGmCe
-
@Adrift 现在它就像一个滑块，这不是我想要的行为。您可以查看上面的小提琴两个cmets或这个链接davidwalsh.name/firefox-animation，只需点击查看演示，它也是基于步骤的。
标签： css css-animations