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); }廣州設計公司https://www.houdianzi.com 我的007辦公資源網站https://www.wode007.com
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) 如下圖
