CSS cubic-bezier() 函数

定义和用法

CSS 的 cubic-bezier() 函数用于定义三次贝塞尔曲线。

三次贝塞尔曲线由四个点 P0、P1、P2 和 P3 定义。在 CSS 中，P0 和 P3 是曲线的起点和终点，且这些点的坐标是固定的比率。P0 是 (0, 0)，代表初始时间和初始状态；P3 是 (1, 1)，代表最终时间和最终状态。

cubic-bezier() 函数可以与 animation-timing-function 属性和 transition-timing-function 属性一起使用。

实例

例子 1

一个从开始到结束速度变化的过渡效果：

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
  transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}

亲自试一试

例子 2

展示具有不同三次贝塞尔速度值的 <div> 元素：

#div1 {animation-timing-function: cubic-bezier(0,0,1,1);}
#div2 {animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {animation-timing-function: cubic-bezier(0.42,0,0.58,1);}

亲自试一试

CSS 语法

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

技术细节

浏览器支持

表格中的数字表示首个完全支持该函数的浏览器版本。

相关页面

参考：CSS animation-timing-function 属性

参考：CSS transition-timing-function 属性