css3贝塞尔曲线_深入探讨：CSS3过渡中的三次贝塞尔曲线

CSS3 Transition是CSS3的重要补充之一。 它允许我们将过渡变化效果应用于CSS规则。 如果您已经熟悉语法 ，您将看到我们需要指定计时功能或转换速度。

我们可以使用四种预定义的计时功能，分别是ease ， ease-in ， ease-out ， ease-in-out和linear 。

但是，大多数人在这些功能中忽略的一件事是它们本质上是基于贝塞尔曲线的 。

• 演示版

贝塞尔曲线

贝塞尔曲线是计算机图形学中常用的曲线模型。 如果您一直在使用矢量图形编辑器（如Adobe Illustrator或Inkscape），则在使用钢笔工具进行绘制时会找到此曲线模型。 该曲线由四个点组成，如下图所示：

因此，在CSS3 Transition中，三次贝塞尔函数在以下语法中定义：

cubic-bezier(P0,P1,P2,P3);

值得注意的是，此三次贝塞尔曲线中的每个点仅允许从0到1的值。好的，让我们返回到前面提到CSS3过渡中的计时函数，并查看它们在立方三次贝塞尔曲线中的实际形成方式。

cubic-bezier(0.25,0.1,0.25,1);

cubic-bezier(0,0,1,1)

easy-in ，使用此计时功能，动画将缓慢开始，然后获得更大的加速度并保持稳定，直到持续时间结束。 可以使用三次方贝塞尔格式将其转换为：

cubic-bezier(0.42, 0.0, 1.0, 1.0)

缓入 ，此计时功能与缓入相反。 速度将开始稳定且快速，然后持续时间即将结束时速度将减慢。 以三次方贝塞尔曲线格式，可以将其转换为：

cubic-bezier(0.0, 0.0, 0.58, 1.0)

缓入 ，此计时功能只是缓入和缓出之间的组合，动画开始缓慢，在中间加速，然后缓慢结束。 在三次贝塞尔曲线中，可以如下进行翻译。

cubic-bezier(0.42, 0.0, 0.58, 1.0)

创建自定义速度

使用三次贝塞尔函数，我们能够创建自定义速度。 但是使用Cubic-bezier函数定义动画速度的主要限制之一是它不那么直观，而且我们无法立即看到速度的移动方式。 幸运的是，有一个名为cubic-bezier.com的工具可以帮助我们。

该工具由Lea Verou （也称为CSS Guru）创建。 它具有可以移动的Bezier曲线，它将立即为您生成值。 我们还可以显示过渡运动并比较速度。

此示例说明了如何利用三次贝塞尔函数设置火箭速度。

您可以查看演示并从这些链接下载源。 希望您喜欢。

• 演示版
• 下载源代码

翻译自: https://www.hongkiat.com/blog/css-cubic-bezier/