CSS--贝塞尔曲线(cubic-bezier)--使用/教程/实例

清疚 2023-10-02 14:09 3阅读 0赞

原文网址：[CSS--贝塞尔曲线(cubic-bezier)--使用/教程/实例\_IT利刃出鞘的博客-CSDN博客][CSS--_cubic-bezier_--_IT_-CSDN]

## 简介 ##

**说明**

本文用示例介绍CSS的过渡与动画中的贝塞尔曲线的用法。

cubic-bezier又称三次贝塞尔曲线，这是一个函数，可以生成速度曲线。

贝塞尔曲线主要用于transition（过渡效果）和animation（动画效果）。其对应的属性为：[transition-timing-function][]、[animation-timing-function][]。

**在线贝塞尔调试工具**

[cubic-bezier.com][]  
[Ceaser - CSS Easing Animation Tool - Matthew Lein][]  
[缓动函数速查表][Link 1]

## **贝塞尔曲线坐标系** ##

格式：cubic-bezier(<x1>,<y1>,<x2>,<y2>)。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01yX1lhbllhbg_size_16_color_FFFFFF_t_70][]

P0：默认值(0,0)  
P1：动态取值(x1,y1)  
P2：动态取值(x2,y2)  
p3：默认值(1,1)

**取值**

需要关注的是P1和P2两点的取值，而其中x轴的取值范围是0到1。当取值超出范围时cubic-bezier将失效；Y轴的取值没有规定。

**坐标系的理解**

x轴：时间，y轴：距离轴。通过斜率来判断速度的变化。（我不知道这样是否正确，但这样的解释符合所有cubic-bezier的运动情况）

## **预定义值** ##

animation-timing-function和transition-timing-function中预定义的五个贝塞尔曲线cubic-bezier()对应的值

**1.linear ：cubic-bezier(0,0,1,1) 匀速运动**

实际上只要x1=y1,x2=y2都可以是匀速的效果 例如：cubic-bezier(0.25.0.25,0.75,0.75)、cubic-bezier(0.1.0.1,0.7,0.7)等

看的是纵坐标和横坐标的比值，所以linear属于：y1/x1=1 y2/x2=1的其中一个;

![70][]

**2.ease ：cubic-bezier(0.25,0.1,0.25,1), 先慢后快再慢**

![70 1][]

**3.ease-in ：cubic-bezier(0.42,0,1,1), 先慢后快**

![70 2][]

**4.ease-out ：cubic-bezier(0,0,0.58,1),先快后慢**

![70 3][]

**5.ease-in-out ：cubic-bezier(0.42,0,0.58,1),先慢后快再慢**

和ease的区别就是开始更慢一些，结束更慢一些。

![70 4][]

## **其他网址** ##

[实用的 CSS — 贝塞尔曲线(cubic-bezier)和Steps的用法\_Mr\_Yan的博客-CSDN博客][CSS _ _cubic-bezier_Steps_Mr_Yan_-CSDN]  
[css3动画贝塞尔曲线cubic-bezier，css3动画的五种情况\_web\_xyk的专栏-CSDN博客\_css 贝塞尔曲线][css3_cubic-bezier_css3_web_xyk_-CSDN_css]

[CSS--_cubic-bezier_--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/121186124
[transition-timing-function]: https://www.runoob.com/cssref/css3-pr-transition-timing-function.html
[animation-timing-function]: https://www.runoob.com/cssref/css3-pr-animation-timing-function.html
[cubic-bezier.com]: https://cubic-bezier.com/#0,0,1,1
[Ceaser - CSS Easing Animation Tool - Matthew Lein]: https://xuanfengge.com/easeing/ceaser/
[Link 1]: https://www.xuanfengge.com/easeing/easeing/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01yX1lhbllhbg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20181109100825964.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01yX1lhbllhbg==,size_16,color_FFFFFF,t_70
[70]: https://img-blog.csdn.net/20180421142843376?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl94eWs=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: https://img-blog.csdn.net/20180421143323726?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl94eWs=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 2]: https://img-blog.csdn.net/20180421144137126?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl94eWs=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 3]: https://img-blog.csdn.net/20180421144517693?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl94eWs=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 4]: https://img-blog.csdn.net/20180421144713882?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl94eWs=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[CSS _ _cubic-bezier_Steps_Mr_Yan_-CSDN]: https://blog.csdn.net/Mr_YanYan/article/details/83893728
[css3_cubic-bezier_css3_web_xyk_-CSDN_css]: https://blog.csdn.net/web_xyk/article/details/80027701