CSS之精灵动画

   .box {
      /* 1680/12 */
      width: 140px;
      height: 140px;
      /* border: 1px solid #000; */
      background-image: url(./images/bg.png);
      animation: 
        move 1s steps(12) infinite,
        run 1s forwards
      ;
    }
    
    @keyframes move{
        /* from{
            background-position:0 0;
        } */
        to{
            background-position:1680px 0;
        }
    }
    @keyframes run{
        /* from{
            transform: translateX(0);
        } */
        to{
            transform: translateX(800px);
        }
    }