cubic-bezier() easing
<easing-function> は CSS のデータ型で、値が変化する割合を記述する数学的な関数を表します。
この 2 つの値の間の遷移は様々な形で適用される可能性があります。アニメーション中に値が変化する速さを記述するために使用されることがあります。これにより、この間、アニメーションの速度を変化させることができます。イージング関数は、CSS のトランジションおよびアニメーションのプロパティで指定することができます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 4 | 12 | 4 | 3.1 | 18 | 2 | |
| cubic-bezier() は CSS 関数で、 3 次ベジェ曲線を使用してスムーズな遷移を作成します。 イージング関数 (easing-function) として、interpolationの始まりと終わりを滑らかにすることができます。 | 16 | 12 | 4 | 6 | 18 | 6 |
基本構文
CSS
.element {
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
animation-timing-function: ease-in-out;
}ライブデモ
実務での使いどころ
-
マテリアルデザインのモーション
カスタムベジェ曲線を使用して、UI要素の展開・折りたたみに物理法則に基づいた自然な動きを与えます。
注意点
- 制御点のY値を0未満や1超に設定するとオーバーシュート（行き過ぎ）が発生し、レイアウトに影響を与える可能性があります。
アクセシビリティ
- 極端に速い、または遅いイージングは操作性に影響するため、適度な速度カーブを選択してください。