这几天在看一些 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;
}
}我们只需要在 @keyframes 中定义关键帧，
cubic-bezier 函数会帮助我们在关键帧之间补帧使其成为流畅的动画，但有时候我们不希望动画连贯的播放，而是跳跃式的播放，那我们就需要借助 steps 函数了。steps函数接收两个参数： number 和 position 。 number 是正整数， position 有两个值： start 和 end 。前面我们提到 steps 的两个特殊值： step-start 和 step-end ，实际上它们分别代表 steps(1, start) 和 steps(1, end) 。那这两个参数分别代表什么含义呢？
number： number 表示动画被分成了多少段，比如上述例子表示 div 从 0px 移动到 100px 的这一整段过程一共被分成 4 段。
position： position 参数可选，默认为 end 。 start 与 end 的含义是什么呢，我的理解是： number 会将整个动画过程分成多段或者说多个周期， start 表示动画的状态会在每个周期的起始点瞬间完成变化，而 end 则表示动画的状态会在每个周期的结束点瞬间完成变化。这里附上 W3C 官方文档上的一张图片：
