css-塞贝尔曲线

文章目录

• 1、定义
• 2、使用和解释

1、定义

• cubic-bezier() 函数定义了一个贝塞尔曲线(Cubic Bezier)
• 语法：cubic-bezier(x1,y1,x2,y2)

2、使用和解释

• x1,y1,x2,y2，表示两个点的坐标P1(x1,y1),P2(x2,y2)
• 将以一条直线放在范围只有 1 的坐标轴中，并从中间拿出两个点来拉扯，最后形成的曲线就是动画的速度曲线
• 如图红色点P1就表示其中一个牵引点，牵引点离默认斜线的距离越远，牵引导致的弯曲也越大
• 一般在transition和animation的timing-function属性使用

transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);