今天要說的是css的動畫曲線。
首先要說的是語法：
value:
1.linear：線性動畫，也就是勻速，以相同的速度開始以相同的速度結束。
2.ease：默認的動畫效果，特點是先快后慢，時間為50%的時候已經完成80%的動畫效果了。
3.ease-in：動畫進行過程中一直加速。
4.ease-out：動畫進行過程中一直減速。
5.ease-in-out：與ease很相似，都是先加速后減速，但是時間為50%的時候完成動畫的50%。
6.cubic-bezier(n,n,n,n)： 在 cubic-bezier 函數中自己的值。可能的值是從 0 到 1 的數值。
代碼如下圖所示：
現在要說的是三次貝賽爾曲線（cubic-bezier）
1.含義
貝塞爾曲線通過控制曲線上的四個點（起始點，終止點以及兩個相互分離的中間點）來創造，編輯圖形，繪制出一條光滑的曲線並以曲線的狀態反映動畫過程中速度的變化。
2.規則
x的取值區間是【0,1】，取值超過該區間cubic-bezier即無效，y的取值范圍沒有限制【-0.5,0.5】,也是可以的，但不應該超出【0，1】范圍太大。
3.舉例說明
①linear對應自定義cubic-bezier(0,0,1,1)，效果為勻速運動，如下圖所示
②ease對應自定義cubic-bezier(.25，.01，.25,1)，效果為先慢后快再慢，如下圖所示
③ease-in對應自定義cubic-bezier(.42,0,1,1)，效果為先慢后快，如下圖所示
④ease-out對應自定義cubic-bezier(0,0,.58,1)，效果為先快后慢，如下圖所示
⑤ease-in-out對應自定義cubic-bezier(.42,0,.58,1)，效果為先慢后快再慢，如下圖所示
4.用代碼形式表現如下圖所示
這就是CSS3 transition-timing-function 屬性的相關分享了，希望可以有所幫助。