貝塞爾曲線

transition-timing-function過渡函數，有linear，ease，ease-in，ease-out，ease-in-out，cubic-bezier(n,n,n,n)，steps。其實它們都是貝賽爾曲線。以下

看貝賽爾曲線就知道了，linear是勻速過渡，ease是先快再慢的節奏，ease-in是加速衝刺的節奏，ease-out是減速到中止的節奏，ease-in-out是先加速後減速的節奏。

如今動畫的精度愈來愈高，若是預約義好的這些函數知足不了你的需求，能夠經過cubic-bezier(n,n,n,n)自定義平滑曲線。從上面的圖形中觀察到，貝塞爾曲線有4個點，左下爲起始點P0座標固定爲(0,0)，右上爲終點P3座標固定爲(1,1)，中間有兩點P1和P2的座標就是cubic-bezier(n,n,n,n)的參數。經過4條連起來的直線，生成平滑的曲線。一圖勝千言：

 

若是要憑腦子空寫出貝賽爾函數的代碼，可能比較困難。好在不用你本身去計算，能夠到工具網站（如貝賽爾立方）上自動生成想要效果的代碼。你也能夠在該站點上，體驗一把linear，ease，ease-in，ease-out，ease-in-out間的差別。