前端 - 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. 什么叫“一帧一帧的改变”， steps(1, start);该如何理解？

• animation-timing-function 中 steps 的用法参见这篇

• steps 详解

2. 第二种直接“-($spriteWidth * 12) 0”我就看不懂了，为什么这样写？

• 首先显然这是 Scss 文件（一种 css 预编译文件）

• 定义了一个变量：$spriteWidth

• -($spriteWidth * 12) 这句就是一个运算呀 => -(140px*12)

Answer 2

1: steps(1, start)我在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.

就是说你的动画帧一开始就马上跳到结束了，所以你看见的是keyframes里面5个帧一帧一帧地切换。如果没有steps(1, start)，就会是一个平滑移动的效果。

2: -($spriteWidth * 12)应该是指把你这个动画分成12帧，每一帧你的背景右移-($spriteWidth * 12)这个长度