Question

我正在使用此演示http://cssdeck.com/labs/css-image-sprite-animations-with-steps-function来创建CSS3动画。但是，我的图像大小不同，所以我有：

<div id="boules"></div>

然后是CSS：

@keyframes boules{  
    from { background-position: 0px; }
    to { background-position: -1067px; }

}

#boules {
  background: url(../images/boules.png) 0 0 no-repeat;
  width: 133px;
  height: 108px;
  animation: boules 2s steps(10, end) infinite;
}

我希望重现与上面的示例链接相同的效果，但由于某种原因，在我的版本中，帧会滑动而不是给出变形为不同形状的静止图像的动画效果。

我已经尝试更改背景的步数，秒数和位置，但我仍然得到此幻灯片效果而不是动画。这是计算问题吗？

由于

Answer 1

您的号码不正确

如果你说你有10个步骤......

animation: boules 2s steps(10, end) infinite;

然后是偏移......

to { background-position: -1067px; }

必须是一个可被10整除的数字。但是1067/10 = 106.7px意味着你的精灵将是一个小数维度，这是不可能的。

查看您的精灵尺寸，并检查您的数学。

Answer 2

是的，它适用于Vals。谢谢你的帮助。事实证明精灵的数量与关键帧宽度相同，但我明白你的观点。干杯！

通过滑动CSS3来停止关键帧动画

2 个答案: