CSS中的图像传送带？

我一直在绞尽脑汁想是否有可能让一个div显示一个永远都是单向的传送带模式

您可以拍摄一个div，使用repeat-x在一个方向上平铺背景图像，然后创建一个关键帧，将背景位置移动一个平铺的宽度，从而将背景移动到过渡开始时的相同位置

我搞不懂的是如何重置背景位置，以便循环可以再次运行，并创建连续单向运动的幻觉。这可以在CSS中完成吗

我可以制作一个gif动画，并用这种方式进行伪装，但它们太大/加载速度太慢&在循环过程中总是会出现口吃

---

谢谢

经过短暂搜索后，在网站上找到了相关内容

精灵文件：

小提琴：

浏览器支持：

HTML:

---

啊，就是这样！如果我将此关键帧动画应用于平铺背景，则会获得连续的腰带效果。非常感谢@用户3908964很高兴它有帮助。顺便说一句，你应该投票/接受答案。

<div class="hi"></div>

.hi {
    width: 50px;
    height: 72px;
    background-image: url("http://s.cdpn.io/79/sprite-steps.png");

    -webkit-animation: play .8s steps(10) infinite;
       -moz-animation: play .8s steps(10) infinite;
        -ms-animation: play .8s steps(10) infinite;
         -o-animation: play .8s steps(10) infinite;
            animation: play .8s steps(10) infinite;
}

@-webkit-keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

@-moz-keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

@-ms-keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

@-o-keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

@keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}