1

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

雪碧：http: //i.imgur.com/krQPw.png

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

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

4

2 回答 2

3

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

这是一个我没有测试过的例子......只是一个使用的演示steps()......更多细节在这里：使用 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; }
}
于 2013-01-06T02:46:08.103 回答
1

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

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

于 2013-01-06T02:42:18.353 回答