css - 从滑动CSS3停止关键帧动画

我正在使用此演示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;
}

我想复制与上面的示例链接相同的效果，但是由于某些原因，在我的版本中，框架会滑过，而不是提供静止图像的动画效果，该图像会变形成不同的形状。

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

谢谢

最佳答案

您的电话号码不正确

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

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

然后偏移量...

to { background-position: -1067px; }

必须是可以被10整除的数字。但是1067/10 = 106.7px意味着您的子画面将是分数维，这是不可能的。

查看您的Sprite尺寸，然后检查数学。