使用steps实现逐帧动画

animation-timing-function: steps(N)；

      /* 1680/12 : 保证显示区域的尺寸和一个精灵小图的尺寸相同 */
      width: 140px;
      height: 140px;

    @keyframes move {
        from {
          background-position: 0 0;
        } 
        to {
          /* 1680: 精灵图的宽度 */
          background-position:  -1680px 0;
        }
    }

 animation: move 1s steps(12) infinite;

@keyframes run {
            to {
                transform: translateX(800px);
            }

  animation: move 1s steps(12) infinite, run 1s forwards;