使CSS精灵动画工作

我是css动画新手，所以我在网上得到了这张序列运动图片，想让它走起来。我遵循教程，但在这种情况下不起作用。我想让它动起来。我不知道如何正确地做到这一点，所以我从图像的第一行开始。其尺寸为832x228

这是CSS代码：

.sprite{
宽度：130px；
高度：130像素；
显示：块；
背景：透明url(http://i.stack.imgur.com/UOPXb.png)0 0不重复；
动画：沃克1步（8）无限；
}
@关键帧漫游器{
0% {
背景位置：0；
}
100% {
背景位置：832px0px；
}
}

---

您在正确的路径上，但关键帧内的

背景位置不正确。精灵图像应该从右向左移动以产生移动动画，因此背景位置应该从
0 0
移动到
-832px 0


.sprite{
宽度：114px；
高度：114px；
显示：块；
背景：透明url(http://i.stack.imgur.com/UOPXb.png)0 0不重复；
动画：沃克1步（8）无限；
/*图像大小为832x228，因此高度设置为其一半*/
}
@关键帧漫游器{
0% {
背景位置：0；
}
100% {
背景位置：-832px0px；
}
}
看起来您的
背景位置不正确
，应该是
-832px
而不是
832px
。请注意，对于上面的图像，您也只能获得前8帧，您需要编辑文件以获得下8帧，以便进行更长的过渡

您可能还希望将
动画中的时间调整为一小部分（我用0.9进行了更平滑的行走），并且您希望将
宽度
和
高度
缩小到
115px左右，以避免看到其他帧。
欢迎@pexichdu。就像罗伯特在回答中提到的，如果你想让最下面一行的图像也出现在动画中，那就很难了。最好把它们放在同一行。@MishkoVladimir:我将接受你的更改，因为你做了一些非常有效的编辑。但是，我将删除第二行的循环部分，因为它并不像预期的那样工作。例如，只有8个步骤，因此我们无法看到所有16个精灵。接下来，我们将看到一个闪烁，图像从顶行的最后一个精灵转到底行的第一个精灵。请不要弄错了。我感谢你的贡献。