首先准备一个大盒子。

<div class="box"></div>

准备一张12帧的小人跑步精灵图。

设置样式，将精灵图设为box的背景。

 .box{
      width: 140px;
      height: 140px;
      background: url(./img/bg.png) no-repeat;
    }

单组动画

设置动画效果：

@keyframes run{
      to{
        background-position: -1680px 0px;
      }
    }

box调用动画：

.box{
      /*steps() 逐帧效果，这样小人跑动就可以一帧一帧的跑动了*/
      animation:run steps(12) 1s infinite;
    }

效果：

多组动画

小人原地跑效果不太好，我们可以在小人奔跑的过程中同意移动盒子

定义一个新的动画：

@keyframes move{
      to{
        transform: translateX(300px);
      }
    }

box调用动画：

.box{
      /*多组动画之间用逗号隔开*/
      animation:run steps(12) 1s infinite,move 2s linear;
    }

效果：