第一种：

@keyframes slow {
        0% {
            background-position: -0px -291px;
        }
        25% {
            background-position: -602px -0px;
        }
        50% {
            background-position: -302px -291px;
        }
        75% {
            background-position: -151px -291px;
        }
        100% {
            background-position: -0px -291px;
        }
    }
     /*动画切换的方式是一帧一帧的改变*/
        -webkit-animation-timing-function: steps(1, start);

第二种：

$spriteWidth: 140px; // 精灵宽度 
@keyframes run {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -($spriteWidth * 12) 0; // 12帧
  }
}
#sprite {
  width: $spriteWidth;
  height: 144px;
  background: url("../images/sprite.png") 0 0 no-repeat;
  animation: run 0.6s steps(12) infinite;
}

1，什么叫“一帧一帧的改变”， steps(1, start);该如何理解？
2，第二种直接“-($spriteWidth * 12) 0”我就看不懂了，为什么这样写？