这几天在看一些 css3 动画的源码实现时，发现 css 代码的 animation 当中有一个比较陌生的单词 steps ，在源码中是这么写的：

animation: thunder 2s steps(1, end) infinite;

查阅相关资料后发现 steps 函数是 animation-timing-function 属性的一个值，那这个函数相较于其他值比如 ease ， linear 的区别在哪里呢。

steps

在查阅相关资料后才发现自己之前对 animation-timing-function 了解不够充分，实际上 animation-timing-function 的 function 指的是 steps() 和  cubic-bezier( ) 即贝塞尔曲线函数这两个函数，像 linear ， ease 这些值其实是   cubic-bezier() 函数的特殊值， steps() 函数同样也有两个特殊值： step-start 和 step-end 。在了解这些前提后，下面来具体分析 steps 函数的作用。

实际上 steps 函数和   cubic-bezier 函数分别对应动画的两种形式：跳跃式和连贯式。回顾平常我们是怎么使用  cubic-bezier 函数的：
 

div {
  animation: move 1s linear infinite alternate;
}
@keyframes move {
  0% {
    margin-left: 0;
  }
  30% {
    margin-left: 50px;
  }
  100% {
    margin-left: 100px;
  }
}

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: move 2s linear;
}
@keyframes move {
  0% {
    margin-left: 0;
  }
  100% {
    margin-left: 200px;
  }
}

 

可以看到红方块是经过 2s 匀速运动到终点，然后回到起始位置

接下来是 steps(1, start) 的例子：

 

div { width: 100px; height: 100px; background-color: red; animation: move 2s step-start; }

效果如下：

 

可以看到在我点击刷新的一瞬间方块就到达了终点，然后经过 2s 后回到起始位置

再来看看 steps(1, end) 的例子：
 

 

div { width: 100px; height: 100px; background-color: red; animation: move 2s step-end; }

效果如下：

 

可以看到当点击刷新时方块并没有运动，这是因为方块会在 2s 后瞬间移动到 200px 的位置，然后动画结束，回到起始位置，由于这个过程特别快，肉眼是看不到的，所以看上去就好像方块没有运动。如果想要停留在终点只需要给 div 加上 animation-fill-mode: forwards 即可。

我们再来看看分成多段的情况，首先 start 分成多段：
 

 

div { width: 100px; height: 100px; background-color: red; animation: move 4s steps(4, start); }

效果如下：

 

上述例子我们将 4s 动画分成 4 个周期，方块会在每个周期起始点也就是 0s ，1s ，2s ，3s 处发生位移，从上述效果图我们也可以看出，在我点击刷新瞬间就完成了一次状态变化，然后在 3s 后达到终点，在终点待了 1s 到动画结束，回到起始位置。

再来看 end 分成多段的情况：
 

 

div { width: 100px; height: 100px; background-color: red; animation: move 4s steps(4, end); }

效果如下：