Javascript 如何在图像后面设置动画？

我正在做我的家庭作业，用html、css和javascript创建一个简单的网页。我在练习用css制作动画，我发现这很酷，它让一些东西在图像后面移动

现在我试着使用源页面来了解他们是如何制作动画的，但由于我还在学习，所以还是没能理解。有没有基于我所解释的例子？

我是根据答案做的。这就是为什么我把你的问题标记为重复的。这很酷，我忍不住要这么做

.嗨{ 宽度：84px； 高度：84px； 背景图像：urlhttps://thunderpick.com/assets/img/bolt/bolt.png; 位置：相对位置； 边框：实心1px黑色； 动画：播放1s步骤21无限，播放0.0476s步骤3无限； } @关键帧播放{ 0% { 背景位置y:0px； } 100% { 背景位置y:-1764px； } } @关键帧播放{ 0% { 背景位置x:0px； } 100% { 背景位置-x:-252px； } }

---

那是雪碧床单。它是由帧组成的单个图像，通过一次只显示一个部分并每隔几毫秒重新定位图像来设置动画。它类似于一本动画书。@TylerRoper我怎样才能找到一个简单的方法来实现这一点？你可以发布一个关于它的答案吗？不幸的是，我认为你的问题是离题的，所以我不会提交一个答案。要求非现场资源的问题在StackOverflow上无效，虽然你可以先搜索CSS Sprite Sheet动画或类似的东西。可能是@TylerRoper的重复我做了，但这有点困难，因为它看起来像是在线条上做动画，你知道我应该搜索哪种方法吗？我找到了旋转和其他一些动作，但这有点困难。也谢谢你们的指导。所以你们要做的是先用playv制作动画，然后用playh和你们根据图像的宽度和高度来设置位置，对吗？也谢谢你们的回答。我搞乱了背景位置，打算根据你在评论中链接的内容使用-x-y基。@Atlas Pio是的，没错。啊，这就是我之前搞乱的，因为当你看那张图像时，感觉你应该制作某种ver~/hor~动画来让它工作。也是因为我在这方面没有经验。。。好的，谢谢。