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

【问题标题】：How to show parts of sprite with CSS keyframes to create animation?如何使用 CSS 关键帧显示部分精灵以创建动画？
【发布时间】：2013-01-06 19:36:08
【问题描述】：

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

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

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

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

【问题讨论】：

标签： css sprite css-animations

【解决方案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; }
}

【讨论】：

效果很好，实际上，由于代码更简洁，我更喜欢您的解决方案:) 我的示例解决方案：jsbin.com/amoxef/9
太棒了！正是我想要的。

【解决方案2】：

终于明白了：http://jsbin.com/amoxef/6

我这样做是为了让它保持相同的位置，例如从 0% 到 7.999%，在 8% 时，它将更改 background-position。所以，由于实际的变化周期是如此之小，它看起来像是“跳转”到下一帧并一直停留到下一个定义的 % 帧。

【讨论】：