cubic-bezier() easing
アニメーションの加速・減速を細かく制御できるイージング関数です。ease、ease-in、ease-out、ease-in-outなどのキーワードは一般的なベジェ曲線のプリセットです。カスタムカーブを定義することで、自然で直感的な動きを表現できます。
概要
アニメーションの加速・減速を細かく制御できるイージング関数です。ease、ease-in、ease-out、ease-in-outなどのキーワードは一般的なベジェ曲線のプリセットです。カスタムカーブを定義することで、自然で直感的な動きを表現できます。
対応ブラウザ
デスクトップ
Chrome 16+
Edge 12+
Safari 6+
Firefox 4+
モバイル
Chrome Android 18+
Safari iOS 6+
Firefox Android 4+
基本構文
CSS
.element {
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
animation-timing-function: ease-in-out;
}実務での使いどころ
-
マテリアルデザインのモーション
カスタムベジェ曲線を使用して、UI要素の展開・折りたたみに物理法則に基づいた自然な動きを与えます。
注意点
- 制御点のY値を0未満や1超に設定するとオーバーシュート（行き過ぎ）が発生し、レイアウトに影響を与える可能性があります。
アクセシビリティ
- 極端に速い、または遅いイージングは操作性に影響するため、適度な速度カーブを選択してください。