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 之間的數字 |
