1.需求背景
随着前端的发展，我们在做项目的时候除了追求炫酷的特效外，更加追求用户的体验和资源的利用率，我们之前在项目里面做动图时都是引入Flash动画，但是Flash动画通常都是非常大的文件，所以为了资源优化，我们需要用到animation-timing-function的steps属性，将动画变为GPU渲染出来。
2.animation-timing-function的简介
animation-timing-function是控制时间的属性,常见的属性有
在上图中，我们可以看到animation-timing-function常见的值可以选择六种。那么今天我们来讲解不常见的一个值（steps）。
3.steps属性
animation默认以ease方式过渡,它会在每个关键帧之间插入补间动画,所以动画效果是连贯性的.除了ease、linear、cubic-bezier之类的过渡函数都会为其插入补间.但有些效果不需要补间,只需要关键帧之间的跳跃,这时应该使用steps过渡方式.
4.steps的测试案例
5.讲解
其中div_static的div是一个参考线，没有任何动画，div_move的div才是我们的目标。
步骤一
将上面的代码复制到你的编辑器里面。
效果
图片描述](https://img-blog.csdnimg.cn/20181031114627908.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjMwNDA1,size_16,color_FFFFFF,t_70)
我们可以看到因为现在我们使用的是默认值ease，所以看起来帧与帧之间的动画虽然看起来是不连贯的，但是起码每一步状态之间还是会有动画将其连接起来。
步骤二
将动画有ease变为step-end。
效果
我们可以看到，现在的动画会忽略最后一步，即我们现在动画从80%到100%的那一步骤。如果我们的动画步骤只有两步的话，那么动画会一直维持在第一步。
步骤三
将动画有step-end变为step-start。
效果
我们可以看到，现在的动画会忽略第一步，即我们现在动画直接从20%到100%，不会出现0%的状态。
步骤四
将动画有step-start变为steps（1）。
效果
我们可以看到，现在的动画和step-end是一样的，会忽略最后一步，注意，steps可以输入两个字，现在我们只是输入了一个1，第二个值默认是end，所以现在的效果其实是steps（1,end）。
步骤五
将动画有steps（1）变为steps（2）。
效果
我们可以看到，现在的动画还是和step-end一样的，但是，动画的频率变快了。
动画还是从0%一直到80%，一共花了两秒钟走了四步，即每一步用时0.5秒，0%到20%视为一步。
而现在将数值由1变为2时， 还是花了两秒，但是0%到20%被拆分成了两步，即现在一共花了两秒钟走了八步，所以动画时间缩短，频率变快了。
步骤六
我们通过步骤五发现，steps属性是将每一步按照值进行切割，所以我们可以利用他这一个特征，将原来我们手写的动画变成程序自动切割，例如我们现在要从0px移动到500px，则需要变为
效果
可以发现和step-end效果是一样的，将0px到500px的距离分为五步，只不过因为第二参数默认值是end，所以会忽略最后一步。只会显示0px到400px，但是代码量少了很多。
6.扩展
我们可以利用steps属性将帧动画变为连续的动画，试试将下图变成动画吧。
素材
效果
7.总结
如果在@keyframes里面设置是动画不是从0%-100%时,那么动画帧与动画帧中间会运用animation-timing-function进行过渡,这样的动画非常不顺滑.
steps(x,start|end)的第一个参数是指时间函数中的间隔数量(必须是正整数),第二个参数默认值是end,也可以填start,x是指在第一步中又一次分割x次进行动画,而不是指从第x开始执行,也不是指整个动画的变化次数.
step-start等同于steps(1,start),会忽略第一步,即从第二步开始执行直到最后,如果只有两步,那么会一直存在第二步.
step-end等同于steps(1,end),会忽略最后一步,即从第一步开始执行直到倒数第二步,如果只有两步,那么会一直存在第一步.
引用w3c的一张step的工作机制图 steps
最后再次强调:timing-function 作用于每两个关键帧之间，而不是整个动画
