CSS中的图像传送带？

Question

我一直在绞尽脑汁思考是否有可能让div显示一个永无止境的“传送带”模式，这种模式总是向一个方向发展。

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

我无法弄清楚的是如何“重置”背景位置，以便循环再次运行并产生连续单向运动的错觉。可以在CSS中完成吗？

我可以为gif制作动画并以这种方式伪装，但是它们相当大/慢速加载＆amp;在循环中总是有口吃。

谢谢！

Answer 1

在简短搜索后，在网站上找到相关内容。

精灵文件：

<强>小提琴： http://jsfiddle.net/CGmCe/8676/

浏览器支持： http://caniuse.com/#feat=css-animation

<强> HTML：

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

<强> CSS：

.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; }
}