在animation和transition兩個屬性中，cubic-bezier是控制變化的速度曲線，下面我們來了解下什麼是cubic-bezier。

cubic-bezier稱為三次貝塞爾曲線，主要是生成速度曲線的函式，規定是cubic-bezier(<x1>,<y1>,<x2>,<y2>) .

從上圖中我們可以看到，cubic-bezier有四個點：
兩個預設的，即：P0(0,0)，P3(1,1)；
兩個控制點，即：P1(x1,y1)，P2(x2,y2)
注：X軸的範圍是0~1，超出cubic-bezier將失效，Y軸的取值沒有規定，但是也不宜過大。
我們只要調整兩個控制點P1和P2的座標，最後形成的曲線就是動畫曲線。

下面以我們常用到的曲線為例：
1、linear，即cubic-bezier(0,0,1,1) / cubic-bezier(1,1,0,0)，左邊cubic-bezier曲線，右邊瀏覽器動畫曲線展示。下同。

2、ease，即cubic-bezier(0.25,0.1,0.25,1)。

3、ease-in，即cubic-bezier(0.42,0,1,1)。

4、ease-out，即cubic-bezier(0,0,0.58,1)。

5、ease-in-out，即這裡寫程式碼片。

6、隨機示例1：cubic-bezier(0.68,-0.55,0.27,0.55)。

7、隨機示例2：cubic-bezier(0.17,0.86,0.73,0.14)