简单动画-奔跑的小人CSS简单的动画样式，让精灵图变成真正的”精灵“跑起来，其中运用到精灵图坐标代码，以及平面位移代码！

1.HTML创建盒子

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

2.CSS样式

<style>
    .box {
      width: 140px;
      height: 140px;
      background: url(./images/bg.png);
      /* 多组动画调用   animation:动画1,动画2...动画n*/
      animation: move .3s steps(12) infinite,move1 3s infinite forwards;
    }

    /* 定义动画 */
    @keyframes move {
      0% {
        background-position: 0 0;
      }

      100% {
        background-position: -1680px 0;
      }
    }

    /* 小人移动动画 */
    @keyframes move1 {
      0% {
        transform: translate(0);
      }

      100% {
        transform: translate(800px);
      }
    }

逐步解析

看到精灵图的第一帧，默认为从左边顺序

.box {
      width: 140px;
      height: 140px;
      background: url(./images/bg.png);

定义第一组动画

@keyframes move {
      0% {
        background-position: 0 0;
      }

      100% {
        background-position: -1680px 0;
      }
    }

调用第一组动画

.box {
      width: 140px;
      height: 140px;
      background: url(./images/bg.png);
      animation: move 1s steps(12) infinite;

此时已经可见小人在原地奔跑，让小人真正的跑起来需要定义第二组动画

定义第二组动画

@keyframes move1 {
      0% {
        transform: translate(0);
      }

      100% {
        transform: translate(800px);
      }
    }

调用第二组动画

.box {
      width: 140px;
      height: 140px;
      background: url(./images/bg.png);
      animation: move 1s steps(12) infinite,move1 3s forwards;

此时可以看到小人沿着X正轴奔跑，到此就完成了一个简单的精灵图动画！

最后还有个小扩展，鼠标放置时可以令小人停止奔跑！

.box:hover {
      animation-play-state: paused;
    }