animation-timing-function与三次贝塞尔曲

animation-timing-function 和 transition-timing-function控制动画速度提供了ease，liner，ease-in，ease-out，ease-in-out几个预设速度，都是基于cubic-bezier来自定义速度。
CSS3动画速度的控制通过三次贝塞尔曲线函数实现，定义规则为

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

原理:

贝塞尔曲线坐标系
贝塞尔曲线通过控制曲线上的四个点（起始点、终止点以及两个相互分离的中间点）来创造、编辑图形，绘制出一条光滑曲线并以曲线的状态来反映动画过程中速度的变化。
timing-function工作图
共有4个点来描述整个曲线的运动形状，其中P0和P3是开始和截止的位置，关键位置是P1和P2，那么P1的坐标(x1,y1)就对应了cubic-bezier(x1,y1,x2,y2)前两个值，而P2的坐标对应了后两个值，那么整个图中就有4个点了（P0、P3永远是固定的）。
x的取值区间是[0,1],取值超过该区间cubic-bezier即无效,y的的取值区间没有限制[-0.5,0.5]也是可以的,但不应该超出[0,1]范围太大。
将P0、P1连线、P2、P3连线，此时这两条线就是整条曲线首位的切线，然后发挥自己的想象力想一下，这两个切线固定，那么整条曲线基本就可以画出来了（因为你要平滑连接、不要乱拐弯）,这条曲线的平陡程度就是动画快慢的反应，即越陡的部分动画反应出来就是越快，越平的部分当然动画反应的就是越慢。

预设方法	贝塞尔方法
linear(0,0,1,1)	{-webkit-animation-timing-function:cubic-bezier(0,0,1,1);}
ease(0.25,0.1,0.25,1)	{-webkit-animation-timing-function:cubic-bezier(0.25,0.1,0.25,1);}

......

其实第一个linear可以换成坐标（0.5,0.5,0.5,0.5），总之很多值都可以替换。