贝塞尔曲线

贝塞尔曲线

CSS 中的贝塞尔曲线（Bézier curves）主要用于定义动画的速度曲线（timing functions）以及在 background-image、clip-path、shape-outside 等属性中绘制平滑路径。这里主要探讨贝塞尔曲线在CSS动画中的应用，特别是在定义动画速度曲线时如何使用。

cubic-bezier() 函数

在CSS动画和过渡效果中，贝塞尔曲线通过 cubic-bezier() 函数来表示。这个函数定义了一条三次贝塞尔曲线，用于描述动画随着时间变化的速度（即变化率）。三次贝塞尔曲线由四个控制点定义，但在 cubic-bezier() 函数中，我们只需要提供四个介于0到1之间的数值，分别代表两个控制点的坐标：

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

• x1 和 y1：第一个控制点的坐标，通常称为起点（P0），默认值为 (0, 0)。这里可以忽略，因为它们始终是 (0, 0)。

• x2 和 y2：第二个控制点的坐标，决定了曲线的形状，直接影响动画的速度变化。这两个值是关键，可自由设定。