立方貝塞爾

cubic-bezier 函式是一個轉換計時函式,通常用於自定義和平滑過渡。

transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);

該函式有四個引數:

cubic-bezier(P1_x, P1_y, P2_x, P2_y)

StackOverflow 文件

這些引數將對映到作為 Bézier 曲線一部分的

StackOverflow 文件

對於 CSSBézierCurves,P0 和 P3 總是在同一個位置。P0 為(0,0),P3 為(1,1),這表明傳遞給三次貝塞爾函式的引數只能在 0 和 1 之間。

如果傳遞的引數不在此間隔內,則該函式將預設為 linear 轉換。

由於 cubic-bezier 是 CSS 中最靈活的轉換,因此你可以將所有其他轉換計時函式轉換為 cubic-bezier 函式:

linearcubic-bezier(0,0,1,1)

ease-incubic-bezier(0.42, 0.0, 1.0, 1.0)

ease-outcubic-bezier(0.0, 0.0, 0.58, 1.0)

ease-in-outcubic-bezier(0.42, 0.0, 0.58, 1.0)