CSS cubic-bezier() 函数
示例
从开始到结束速度可变的过渡效果
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}
亲自试一试 »
定义和用法
cubic-bezier() 函数定义了一个三次贝塞尔曲线。
三次贝塞尔曲线由四个点 P0、P1、P2 和 P3 定义。P0 和 P3 是曲线的起点和终点，在 CSS 中，这些点的坐标是比率。P0 为 (0, 0)，表示初始时间和初始状态，P3 为 (1, 1)，表示最终时间和最终状态。
cubic-bezier() 函数可以与 animation-timing-function 属性和 transition-timing-function 属性一起使用。
| 版本 | CSS3 |
|---|
浏览器支持
表中的数字指定了完全支持该函数的第一个浏览器版本。
| 函数 | |||||
|---|---|---|---|---|---|
| cubic-bezier() | 4.0 | 10.0 | 4.0 | 3.1 | 10.5 |
CSS 语法
cubic-bezier(x1,y1,x2,y2)
| 值 | 描述 |
|---|---|
| x1,y1,x2,y2 | 必需。数值。x1 和 x2 必须是 0 到 1 之间的数字 |
