CSScubic -bezier（）関数
例
開始から終了まで可変速度の遷移効果：
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}
定義と使用法
cube-bezier（）関数は、キュービックベジェ曲線を定義します。
キュービックベジェ曲線は、4つの点P0、P1、P2、およびP3によって定義されます。P0とP3は曲線の始点と終点であり、CSSでは、座標が比率であるため、これらの点は固定されています。P0は（0、0）であり、初期時間と初期状態を表します。P3は（1、1）であり、最終時間と最終状態を表します。
cube-bezier（）関数は、 animation-timing-function プロパティおよび transition-timing-functionプロパティとともに使用できます。
| バージョン： | CSS3 |
|---|
ブラウザのサポート
表の数字は、この機能を完全にサポートする最初のブラウザバージョンを示しています。
| Function | |||||
|---|---|---|---|---|---|
| cubic-bezier() | 4.0 | 10.0 | 4.0 | 3.1 | 10.5 |
CSS構文
cubic-bezier(x1,y1,x2,y2)
| Value | Description |
|---|---|
| x1,y1,x2,y2 | Required. Numeric values. x1 and x2 must be a number from 0 to 1 |