css3 animation

Question

我想让小人原地动 ，但是他往前走，而且帧结束后会闪一下从头开始，这太难看了，
大佬怎么解决，下面是代码

<div class="loading">
        <div class="load">

        </div>
      </div>

.loading{
    width: 100px;
    height: 100px;
    background: rgb(0,0,0,0.5);
    position: fixed;
    top: 35%;
    left: 35%;
}
.load{
    position: absolute;
    background-image: url(/static/img/geijiasheng.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 618px 80px;
    height: 80px;
    width: 64px;
    -webkit-animation: sprite 1s steps(10) infinite reverse;
    left: 19%;
    top: 10%;
}
@-webkit-keyframes sprite {
    0% {
        background-position:0;
    }
    100% {
        background-position: -768px 0;
    }
}

Answer 1

这个已经解决了 是宽的问题，但是还有一个没有解决就是帧运行到100%运行下一帧的时候会闪一下这个怎么解决啊

Answer 2

闪一下是因为你的background-repeat设置的是no-repeat，所以最后一贞是没有背景图片的，（你这里设的reverse所以是第一针没有图片）animation里面的background-position超出了总尺寸。可以改小一个盒子宽度的尺寸，steps值减1，就好了。