animation 动画重播

<style>
        div,
        body{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: #333;
        }
        @keyframes runnings{
            0%{
                background-position: 0% 0%;
            }
            100%{
                background-position: -1500px 0%;
            }
        }
        @-webkit-keyframes runnings{
            0%{
                background-position: 0% 0%;
            }
            100%{
                background-position: -1500px 0%;
            }
        }
        .running{
            width: 100px;
            height: 100px;
            background: url(http://7xov8j.com1.z0.glb.clouddn.com/open-moveImg.png) 0 0 no-repeat;
            background-size: cover;
            margin: 0 auto;
            -webkit-animation: runnings 1s steps(15) infinite;
            -moz-animation: runnings 1s steps(15) infinite;
            -ms-animation: runnings 1s steps(15) infinite;
            -o-animation: runnings 1s steps(15) infinite;
            animation: runnings 1s steps(15) infinite;
        }
</style>

<!-- 结构 -->
<div class="running"></div>

注：keyframes 里的background-position的计算，容器的长度*steps。

转载于:https://www.cnblogs.com/biangz/p/6086701.html