上图的坐标系中，x轴代表时间，y轴代表动画的进度，在这张图中我们需要注意的是实心圆点，实心圆点表示的是动画所处的状态。我们来看第一张图，它表示的是 steps(1, start) 。根据前面的解释，整段动画将会作为一段也就是只有一个周期，而指定了 start 参数使得动画会在周期的起始点状态发生改变，所以我们可以看到第一个实心圆点的坐标为 (0,1) 。对于第二张图片，由于指定了 end ，所以动画的状态会在周期的结束点突变，因此对应两个实心圆点的坐标为 (0,0) 和 (1,1) 。下面的 steps(3, start) 和 steps(3, end) 也是同样的道理，这里就不具体分析了。
接下来为了更加直观的感受 steps 函数的作用，举几个例子来加深理解：
这里先举一个连贯动画来作为参考，部分代码如下：
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);
}效果如下：
