首先，不要觉得陌生，animation-timing-function只是animation的一个属性而已。

通常在网上查到的这个属性的值就是 linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier这几个值。一般我们经常使用的也都是前五个，cubic-bezier（贝塞尔曲线）都很少用到。

前五个都是线性的，也就是都是缓慢过度到下一帧的，比如我们有个场景：需要做一个人物跑步的loading动画，UI设计师给我们提供了一张拆分动作的雪碧图，而我们只需要控制其背景的位移就可以利用translate就可以实现了。当然，我们不可能让其慢慢的切换位置的。这时候我们就用到了animation-timing-function的另一个值：step-start | step-end。如果你有这样的需求，不妨先试一下，会有意想不到的效果，哈哈哈。。。

理解steps:

steps接收2个参数。
第一个参数为number,指定的间隔数；
第二个参数可选，参数为 start | end，指定在每个间隔的起点或终点发生变化，默认是end.
step-start等同于steps(1, start)
step-end等同于steps(1,end)
注意：第一个参数指定的间隔数不是整个动画期间的间隔数。是作用与两个关键帧之间，而并非整个keyframe之间。也就是如果写成steps(2,start)，
动画直接指定的

@key-frames{
  0% { }
  50% {}
  100% {}
}

会把0-50分成2步，50-100再分成2步。
第二个参数指定在间隔的起点或终点发生变化。start和end都会选择性的跳过头尾部分，也就是start跳过0%，end跳过100%。