CSS cubic-bezier() 関数
CSS 関数例
開始から終了までの異なる速度のトランジション効果：
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() 関数はベジェ曲線(Cubic Bezier)を定義します。
ベジェ曲線は4つの点 P0、P1、P2 と P3 によって定義されます。P0 と P3 は曲線の始点と終点です。P0 は (0,0) であり初期時間と初期状態を表し、P3 は (1,1) であり最終時間と最終状態を表します。
上の図から、cubic-bezier の値の範囲について知っておく必要があります：
P0：默认值 (0, 0) P1：动态取值 (x1, y1) P2：动态取值 (x2, y2) P3：默认值 (1, 1)
注目すべきは P1 と P2 の2点の値です。そのうち X 軸の値の範囲は 0 から 1 で、範囲を超えると cubic-bezier は無効になります。Y 軸の値には規定がなく、もちろん大きすぎる必要もありません。
最も直接的な理解は、範囲が1の座標軸に直線を置き、その中間から2つの点を取り出して引っ張る（X 軸の値の区間は [0, 1]、Y 軸は任意）と、最終的にできる曲線がアニメーションの速度曲線になるということです。
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 の数値である必要があります。 |
その他の拡張