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 屬性