CSS精灵动画未按预期工作

我使用的是不同单位的代码：

-webkit-animation: play .8s steps(10) infinite;

及

看

但我一直得到一个侧面滚动图像，代码如下：

$('html > head').append("<style class='"+name+" animation'>@-webkit-keyframes "+name+" {from {background-position:"+start+"px -"+y+"px;} to{ background-position: -"+end+"px -"+y+"px; }} ."+name+"{background-image: url(assets/images/"+image+".png); -webkit-animation: "+name+" "+duration+"s steps("+current_key.length+") infinite; width:"+w+"px; height: "+h+"px;}</style>");

$（'html>head'）。将（“@-webkit关键帧”+name+”{从{background position:“+start+”px-“+y+”px；}添加到{background position:-“+end+”px-“+y+”px；}”。+name+“{背景图像：url（资产/图像/“+image+”.png）；-webkit动画：“+name+”+duration s步数（“+current"key.length+”）无限；宽度：“+w+”px；}”；

我的意思是，图像不会改变，它会随着时间的推移在其他图像上滚动，我正在尝试使用CSS动画制作游戏的精灵表动画

---

我在别处找不到这个问题，也许我找错了。谢谢你的阅读

您的代码与原始代码之间的区别在于，在原始代码中，精灵已经一直向左移动，因此当精灵滚动时，如果您从{background position:100px；}设置

，您将永远看不到下一个图形的白色部分，因此它看起来不会滚动

你会看到滚动条，我相信你会更好地理解我，另外，我只尝试在原始代码中使用不同的值，但是如果你用4步而不是10步，虽然你看不到完整的动画，但你会看到一个足够接近的动画，你也可以使用9步，我稍后会再看一看，看看我是否能给你一个更好的答案。这是叉子，你可以看看

编辑：

在更仔细地查看动画属性（特别是步骤函数）之后，我意识到它会将图像的宽度（50px）移动步骤数（10），从而得到我们想要移动的-500px。因此，例如，如果您希望将sprite 300px置于右侧，则必须更改动画代码，如下所示：

@-webkit-keyframes play {
from { background-position:    300px; }
to { background-position: -200px; }
}

因为这样你已经移动了300px，所以你只需要移动剩下的-200px。因此，总结更改这些值的公式如下： （

sprite_-width

*

-步数

）-（

从_-brackground_位置

）=（到_-background_位置）；

---

请注意，步骤数为负数！还请注意，

from

和

to

也可以用作百分比。检查具有最新更改的。如果您还有任何问题或意见，请随时提问/发表意见。希望这有帮助！谢谢，我很高兴我能帮上忙，而且我忘了放一个链接到css技巧，在那里

steps（）

函数解释得很好，并且使用了

css动画的其他
属性。如果你喜欢的话就去看看。来自墨西哥的问候
 嗯，我已经完成了90%的代码，我有一个额外的-32px（瓷砖宽度），因为我认为我需要得到图像的一角，以。。。不管怎样，你的公式允许我在10秒内检查结果并修改代码！感谢您这么快的回复和来自阿根廷的问候！
@-webkit-keyframes play {
from { background-position:    300px; }
to { background-position: -200px; }
}