CSS--过渡与动画

心已赠人 2022-12-23 11:25 174阅读 0赞

原文网址：[CSS--过渡与动画\_IT利刃出鞘的博客-CSDN博客][CSS--_IT_-CSDN]

# 贝塞尔曲线 #

**其他网址**

> [实用的 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]
> 
> **在线贝塞尔调试工具**
> 
> [cubic-bezier.com][]  
> [Ceaser - CSS Easing Animation Tool - Matthew Lein][]  
> [缓动函数速查表][Link 1]

# 简介 #

**简介**

> cubic-bezier又称三次贝塞尔，主要是为animation生成速度曲线的函数，规定是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--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/110102137
[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
[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]: /images/20221120/91ee5db2481946fba5afb2600c2b3a40.png
[70]: /images/20221120/bb97aefe40c24012b99e0c26f9271bc6.png
[70 1]: /images/20221120/a82bc2f306dd46bb8cd63644ef75be63.png
[70 2]: /images/20221120/891fbc59146848a8a026b41f122cd126.png
[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