概括
摩拜后端团队的zmy
本文将引导您通过几个简单的演示来了解有关动画时间函数中的步骤函数的更多信息。
欢迎留言分享脚步相关动画的疗效，欢迎批评指正。 其他后端干货请关注我公司陌陌公众号——“前端新视野”。
可以借助CSS3动画来创建动画，可以在很多页面中替代Flash、JS等，提高页面加载速度。 众所周知，Animation有8个属性，如下：
属性名称简介
动画名称
指定需要绑定到选择器的关键帧的名称
动画持续时间
完成动画所花费的时间，以秒或微秒为单位
动画计时函数
指定动画的速率曲线
动画延迟
动画开始前有延迟
动画迭代计数
动漫剧
动画方向
指定动画是否应反向旋转播放
动画播放状态
指定动画是正在运行还是已暂停
动画填充模式
动画未播放时（动画完成或动画延迟）应用于元素的样式
以上8个属性决定了Animation能够实现什么样的动画效果。
本文主要介绍timing-function中的steps()函数。 动画在执行动画时默认使用ease函数进行过渡。 Ease会在每个关键帧之间插入补间动画，这样动画的效果是连贯的。
除了ease函数之外，线性、cubic-bezier（贝塞尔曲线）等过渡函数也会为其插入补间动画。
但有时个别效果不需要补间，而只需要在关键帧之间跳转，这时就使用steps()过渡模式。
1.什么是步骤？
steps()是Animation中的一个时序函数，可以实现动画的前馈变化，而不是两个状态之间的线性过渡。
Steps() 接受两个参数：
步骤(n,[开始|结束])
2、如何使用步骤？
经典的菊花加载治疗效果图大家都看过了，它的实现原理很简单：
静态图像，稍后添加动画：
设置在固定步数内旋转（旋转）360度，以达到加载的效果。 具体实现方法如下：
class="loading-dot-step" src="./loading.png">
...
.loading-dot-step {
animation: loading 1s infinite steps(12,start);
}
@keyframes loading {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
静态图如图所示：
给里面的静态图片添加动画，steps设置12步，完成两个关键帧之间的运动轨迹，即从当前状态旋转360度，实现下面gif的动画效果。
不仅有菊花加载的功效，线性加载也很常见。 实现方法是：
借助timing-function的线性过渡函数，实现了图片的连续旋转。 此时的疗效在视觉上是一个连续的动画，如右图所示：
对于两种加载效果图，第一种是阶梯法，第二种是线性过渡形式。
两者的实现原理类似：
两者都将图片从当前状态旋转到两个关键帧之间的 360 度。 当timing-function设置为线性时，状态从0%到100%的变化是均匀的线性变化；
当动作设置为steps时，整个动画从0度旋转到360度旋转分为12步，每步之间都有跳跃，因此出现了经典的菊花加载效果。
3.区分开始和结束
步骤的执行点开始和结束是很多人疑惑的地方。 误用start和end可能会导致动画效果与理想情况不一致。 很多人分不清两者之间的区别。 这里有几个简单的演示来帮助理解这两个属性值之间的区别。
步骤()可以简化两个关键字step-start和step-end。
1、steps（1， start）
<div class="a box">
