CSS cubic-bezier() 関数

定義と使用方法

CSSの cubic-bezier() 関数は、三次ベ塞尔曲線を定義するために使用されます。

三次ベ塞尔曲線は、4つの点 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 属性