如何使用CSS关键帧显示部分精灵以创建动画？

我的目标是较旧的webkit浏览器QT webkit，不幸的是，它不支持更改关键帧中的背景图像。所以intead，我已经创建了结合所有12帧的sprite，现在我正试图以一定的间隔通过每一帧来创建动画。但我有一个水平精灵，当我尝试在某个关键帧处更改background-position-x%时，它会滑动

雪碧：

示例：我将动画持续时间设置得更长，以查看发生了什么。最初，我希望在整个动画周期中设置为1秒

如何使其跳跃而不是滑动到sprite中的下一帧位置？

最终获得：

我这样做，它将保持在相同的位置，例如从0%到7.999%，在8%，它将改变背景位置。因此，由于实际的更改周期非常小，它看起来像是跳转到下一帧，并一直保持到下一个定义的%帧。

最终得到它：

我这样做，它将保持在相同的位置，例如从0%到7.999%，在8%，它将改变背景位置。因此，由于实际的更改周期非常小，它看起来像是跳转到下一帧，并一直保持到下一个定义的%frame。

您应该检查CSS关键帧中的步骤选项

这是一个我没有测试过的例子。。。只是一个使用步骤的演示

您应该检查CSS关键帧中的步骤选项

这是一个我没有测试过的例子。。。只是一个使用步骤的演示

---

非常好用，事实上，我更喜欢你的解决方案，因为代码更清晰：我的例子中的解决方案：棒极了！这正是我想要的。效果很好，事实上，我更喜欢你的解决方案，因为代码更清晰：我的示例的解决方案：辉煌！这正是我想要的。

#loader{
    border: 2px black solid;
    width: 800px;
    height: 480px;
    background: url('http://i.imgur.com/krQPw.png?1');
    background-position: 0px 0px;
    background-repeat: no-repeat;

    -webkit-animation: play .8s steps(10) infinite;
       -moz-animation: play .8s steps(10) infinite;
        -ms-animation: play .8s steps(10) infinite;
         -o-animation: play .8s steps(10) infinite;
            animation: play .8s steps(10) infinite;

}

@-webkit-keyframes play {
   from { background-position:    0px; }
     to { background-position: -8800px; }
}

@-moz-keyframes play {
   from { background-position:    0px; }
     to { background-position: -8800px; }
}

@-ms-keyframes play {
   from { background-position:    0px; }
     to { background-position: -8800px; }
}

@-o-keyframes play {
   from { background-position:    0px; }
     to { background-position: -8800px; }
}

@keyframes play {
   from { background-position:    0px; }
     to { background-position: -8800px; }
}