CSS cubic-bezier() 函數(shù)

實(shí)例

從開(kāi)始到結(jié)束的不同速度過(guò)渡效果：

div { width: 100px; height: 100px; background: red; transition: width 2s; transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); }

ubic-bezier() 函數(shù)定義了一個(gè)貝塞爾曲線(Cubic Bezier)。

貝塞爾曲線曲線由四個(gè)點(diǎn) P0，P1，P2 和 P3 定義。P0 和 P3 是曲線的起點(diǎn)和終點(diǎn)。P0是（0,0）并且表示初始時(shí)間和初始狀態(tài)，P3是（1,1）并且表示最終時(shí)間和最終狀態(tài)。

從上圖我們需要知道的是 cubic-bezier 的取值范圍:

P0：默認(rèn)值 (0, 0)
P1：動(dòng)態(tài)取值 (x1, y1)
P2：動(dòng)態(tài)取值 (x2, y2)
P3：默認(rèn)值 (1, 1)

我們需要關(guān)注的是 P1 和 P2 兩點(diǎn)的取值，而其中 X 軸的取值范圍是 0 到 1，當(dāng)取值超出范圍時(shí) cubic-bezier 將失效；Y 軸的取值沒(méi)有規(guī)定，當(dāng)然也毋須過(guò)大。

最直接的理解是，將以一條直線放在范圍只有 1 的坐標(biāo)軸中，并從中間拿出兩個(gè)點(diǎn)來(lái)拉扯（X 軸的取值區(qū)間是 [0, 1]，Y 軸任意），最后形成的曲線就是動(dòng)畫的速度曲線。

支持版本：CSS3

表格中的數(shù)字表示支持該函數(shù)的第一個(gè)瀏覽器版本號(hào)。

函數(shù)
cubic-bezier()	4.0	10.0	4.0	3.1	10.5

cubic-bezier(x1,y1,x2,y2)

值	描述
x1,y1,x2,y2	必需。數(shù)字值，x1 和 x2 需要是 0 到 1 的數(shù)字。

其他擴(kuò)展

上一篇：CSS calc() 函數(shù) 下一篇：CSS hsl() 函數(shù)