立方贝塞尔

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)