广州蓝景技术分享—animation-timing-function的自定义动画速度曲线

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才是我们的目标。
步骤一
将上面的代码复制到你的编辑器里面。
效果
我们可以看到因为现在我们使用的是默认值ease，所以看起来帧与帧之间的动画虽然看起来是不连贯的，但是起码每一步状态之间还是会有动画将其连接起来。

步骤二<