當大家開始做css3動畫的時候，了解貝塞爾曲線就成了不可或缺的。“貝賽爾曲線”是由法國數學家Pierre Bézier所發明，由此為計算機矢量圖形學奠定了基礎。它的主要意義在於無論是直線或曲線都能在數學上予以描述。這里主要說貝塞爾曲線在css3中的運用，三次方公式，四個點確定
三階貝塞爾曲線由四個點確定，那么css3的貝塞爾函數cubic-bezier(x1,y1,x2,y2)只有兩個坐標點是怎么回事？
實際是css3的貝塞爾函數應該是這樣的：cubic-bezier(0,0,x1,y1,x2,y2,1,1) 4個點
其中 0,0和1,1是固定的起始和結束位置,不能被更改，所以被簡寫省略掉了。我們只需要設置x1,y1,x2,y2就行了，取值范圍是[0,1]之間任意的值。就變成了cubic-bezier(x1,y1,x2,y2)這個樣子
(0,0)、(x1,y1)、(x2,y2)、(1,1)四個點形成了運動速度曲線圖即貝塞爾曲線：可以分為以下這個五種情況
情況1：x∈[0,0.5]時y<x; x∈[0.5,1]時 y>x。那么大致的曲線是這個樣子的
情況2：x∈[0,0.5]時y>x; x∈[0.5,1]時 y<x。那么大致的曲線是這個樣子的
情況3：x∈[0,1]時 y>x; 那么大致的曲線是這個樣子的
情況4：x∈[0,1]時 y<x; 那么大致的曲線是這個樣子的
情況5：x1 = y1,x2=y2；那么曲線一定是這個樣子的
此時再來說下animation-timing-function和transition-timing-function中預定義的五個貝塞爾曲線cubic-bezier()對應的值
1.linear ：cubic-bezier(0,0,1,1),動畫勻速運動如圖(情況5的一種)：
實際上只要x1=y1,x2=y2都可以是勻速的效果 例如：cubic-bezier(0.25.0.25,0.75,0.75)、cubic-bezier(0.1.0.1,0.7,0.7)等
看的是縱坐標和橫坐標的比值，所以linear屬於：y1/x1=1 y2/x2=1的其中一個;
2.ease ：cubic-bezier(0.25,0.1,0.25,1),動畫 先慢后快再慢 如圖(情況1的一種)：
3.ease-in ：cubic-bezier(0.42,0,1,1),動畫先慢后快如圖(情況3的一種):
4.ease-out ：cubic-bezier(0,0,0.58,1),動畫先快后慢如圖(情況4的一種):
5.ease-in-out ：cubic-bezier(0.42,0,0.58,1),動畫先慢后快再慢如圖(情況1的一種):
和ease的區別就是開始更慢一些，結束更慢一些。所以ease,ease-in-out屬於情況1的一種
附：制圖工具 http://cubic-bezier.com/
————————————————
版權聲明：本文為CSDN博主「web_xyk」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/web_xyk/article/details/80027701