梗概
animation-timing-function属性规定动画的速度曲线。即因变量随时间的变化关系。但实际的时间快慢具体由animation-duration决定animation-timing-function属性可接受以下值:ease- 指定从慢速开始,然后加快,然后缓慢结束的动画(默认)linear- 规定从开始到结束的速度相同的动画ease-in- 规定慢速开始的动画ease-out- 规定慢速结束的动画ease-in-out- 指定开始和结束较慢的动画cubic-bezier(_n_,_n_,_n_,_n_)- 运行您在[use::cubic-bezier]中定义自己的值steps(步数)- 阶梯式的突变
- 示例:

1. 实例
下面这些例子展示了可以使用的一些不同速度曲线:
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}