深入探讨：CSS3过渡中的三次贝塞尔曲线
如果您已经熟悉语法 ，您将看到我们需要指定计时功能或转换速度。
它允许我们将过渡变化效果应用于CSS规则。
CSS3 Transition是CSS3的重要补充之一。
我们可以使用四种预定义的计时功能，分别是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.com的工具可以帮助我们。
但是使用Cubic-bezier函数定义动画速度的主要限制之一是它不那么直观，而且我们无法立即看到速度的移动方式。
使用三次贝塞尔函数，我们能够创建自定义速度。
我们还可以显示过渡运动并比较速度。
它具有可以移动的Bezier曲线，它将立即为您生成值。
该工具由Lea Verou （也称为CSS Guru）创建。
此示例说明了如何利用三次贝塞尔函数设置火箭速度。
希望您喜欢。
您可以查看演示并从这些链接下载源。
上一篇： python面试，日更