CSS cube-bezier()函数

它是CSS中的内置函数，用于定义三次Bezier曲线。贝塞尔曲线是在2D图形应用程序(如墨水空间，adobe illustrator等)中使用的数学定义的曲线。此CSS函数是过渡时间函数，用于平滑和自定义过渡。

它由四个点(即P0，P1，P2和P3)定义。点P0和P3(称为锚点)是起点和终点，点P1和P2(称为手柄)是中间点。

对于CSS Bezier曲线，点P0和P3始终位于同一位置。 P0在(0,0)处代表初始状态和初始时间，而P3在(1,1)处代表初始状态和最终时间。这意味着传递给cubic-bezier()函数的参数只能在0和1之间。

句法

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

此CSS函数接受四个必填数字值。 x1和x2的值必须介于0和1之间，否则该值将无效。如果我们传递的参数不在此间隔内，则函数将设置为其默认值，即线性过渡，其值为cubic-bezier(0，0，1，1)。

通过使用以下插图，我们可以了解此CSS函数。

例

此函数可以与动画定时功能和过渡定时功能属性一起使用。

在这里，我们正在使用transition-timing-function属性。

 The cubic-bezier() Function 
 Move your mouse over the below div element, to see the transition effect. 

输出量