Question

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

精灵：http://i.imgur.com/krQPw.png

示例：http://jsbin.com/amoxef/1（我将动画持续时间设置得更长，看看发生了什么。原来我希望在整个动画周期中将其设置为1秒。）

如何使它“跳”而不是滑动到下一帧（精灵中的位置）？

Answer 1

您应该查看CSS关键帧中的steps()选项。

以下是我未测试的示例...只是使用steps() ... More details here: Taking steps() with CSS animations的演示。

#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; }
}

Answer 2

最后得到了它：http://jsbin.com/amoxef/6

我这样做是为了保持相同的位置，例如从0％到7.999％，在8％时，它会改变background-position。因此，由于实际的变化周期非常小，它看起来像是“跳”到下一帧并保持不变直到下一个定义的％帧。

如何用CSS关键帧显示sprite的部分来创建动画？

2 个答案: