前端 - css3动画怎样对帧的理解？

Question

第一种：

@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”我就看不懂了，为什么这样写？

Answer 1

1. What is "frame-by-frame change", how to understand steps(1, start);?

• For the usage of steps in animation-timing-function, please refer to this article

• Detailed explanation of steps

2. I can’t understand the second direct method of “-($spriteWidth * 12) 0”. Why is it written like this?

• First of all obviously this is a Scss file (a css precompiled file)

• defines a variable: $spriteWidth

• -($spriteWidth * 12) This sentence is an operation => -(140px*12)

Answer 2

1: steps(1, start)I happened to see an explanation on MDN

This keyword represents the timing function steps(1, start). Using this timing function, the animation jumps immediately to the end state and stay in that position until the end of the animation.

That is to say, your animation frame jumps to the end as soon as it starts, so what you see is the 5 frames in the keyframes switching frame by frame. If there is no steps(1, start), it will be a smooth moving effect.

2: -($spriteWidth * 12)It should mean dividing your animation into 12 frames, and moving your background to the right in each frame -($spriteWidth * 12)this length