css3 animation模块，其中animation-timing-function 和 transition-timing-function两个属性来控制动画速率划分提供了ease，liner，ease-in，ease-out，ease-in-out几个预设速率，还可以同过cubic-bezier来自界说速率，想要深入领会CSS3动画，实现为所欲为的动画效果，照样有需要明白下其中的原理。

CSS3动画速率的控制通过三次贝塞尔曲线函数实现，界说规则为 

cubic-bezier (x1,y1,x2,y2)

cubic-bezier又称三次贝塞尔，主要是为 animation 天生速率曲线的函数，划定是 cubic-bezier(<x1>, <y1>, <x2>, <y2>)。 从下图中简要明白一下 cubic-bezier：

从上图我们需要知道的是 cubic-bezier 的取值局限: 

P0：默认值 (0, 0) 
P1：动态取值 (x1, y1) 
P2：动态取值 (x2, y2) 
P3：默认值 (1, 1)

我们需要关注的是 P1 和 P2 两点的取值，而其中 X 轴的取值局限是 0 到 1，当取值超出局限时 cubic-bezier 将失效；Y 轴的取值没有划定，固然也毋须过大。 形成P0到P3曲线就是贝塞尔曲线。 

一条直线放在局限只有 1 的坐标轴中，并从中心拿出两个点来拉扯（x1,y1,x2,y2），最后形成的曲线就是动画的速率曲线。

.animation {
    transition: all 2s cubic-bezier(.65,.13,.22,.88);
}

CSS3提供的几个预设速率： 

几个常用的固定值对应的 cubic-bezier 值以及速率曲线

1.ease   对应自界说cubic-bezier(.25,.01,.25,1),效果为先慢后快再慢；

2.linear   对应自界说cubic-bezier(0,0,1,1)，效果为匀速直线； 

 3.ease-in  对应自界说cubic-bezier(.42,0,1,1),效果为先慢后快； 

 4.ease-out  对应自界说cubic-bezier(0,0,.58,1),效果为先快后慢； 

 5.ease-in-out   对应自界说cubic-bezier(.42,0,.58,1),效果为先慢后快再慢。 

往返缓冲效果：cubic-bezier(0.68, -0.55, 0.27, 1.55) 如下图  

链接: http://www.fly63.com/article/detial/6063