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 之间的数字 |
