CSS 三次贝塞尔（cubic-bezier）函数

简介

CSS 三次贝塞尔函数是用来定义动画过渡效果的一种方式。它可以通过控制点来定义一个贝塞尔曲线，从而改变动画的速度和缓动效果。

语法

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

• x1和y1表示第一个控制点，其值范围为0~1之间。
• x2和y2表示第二个控制点，其值范围也为0~1之间。

使用

通过在CSS动画或过渡中使用cubic-bezier函数，可以创建各种各样的缓动效果。

例如：

transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1);

这里的控制点0.25, 0.1, 0.25, 1定义了一个缓动效果，使得动画在开始时相对较慢，然后加速到中间，最后再减速到结束。

可以通过调整控制点的值来得到不同的效果。

常见效果

线性

线性效果是默认的过渡效果，动画在整个过程中保持匀速。

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

缓进缓出

缓进缓出效果使得动画先加速然后减速。

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

弹性

弹性效果模拟了弹簧的拉伸和回弹效果。

cubic-bezier(0.19, 1, 0.22, 1)

缓进

缓进效果使得动画开始时较慢，然后加速到结束。

cubic-bezier(0.47, 0, 0.745, 0.715)

缓出

缓出效果使得动画开始时较快，然后减速到结束。

cubic-bezier(0.39, 0.575, 0.565, 1)

总结

CSS 三次贝塞尔函数提供了一种简单而强大的方式来定义动画过渡效果。通过调整控制点的值，可以得到各种不同的缓动效果，从而增强用户界面的交互性和吸引力。

详细的控制点数值可以在 cubic-bezier.com 等网站上进行可视化调整和预览。