Material Design標準イージングカーブ

Material Design標準カーブ

GoogleのMaterial Designモーションガイドラインは、画面上で開始し終了する要素 — ビューポート内である位置から別の位置に移動する要素のための標準イージングカーブを定義しています。

値

transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

このカーブは適度な加速（最初のコントロールポイントがx=0.4でカーブをわずかに下に引く）の後、顕著な減速（2番目のコントロールポイントがx=0.2で左寄りにあり、長く緩やかな減速を作る）が続きます。

このカーブの理由

Material Designはモーションが自然で意図的に感じられるべきだと強調しています。標準カーブは物理的なオブジェクトが押されたときの動きを模倣します。減速フェーズが意図的に長いのは、人間の目がオブジェクトの到着点に開始点よりも注意を払うからです。

Material Designモーションファミリー

カーブ	cubic-bezier	目的
Standard	(0.4, 0, 0.2, 1)	画面上の移動
Decelerate	(0, 0, 0.2, 1)	画面に入る
Accelerate	(0.4, 0, 1, 1)	画面から出る

コード例

.fab {
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.fab:hover {
  transform: scale(1.1);
}

標準カーブは、フローティングアクションボタン、カード、チップ、リストアイテムなどのMaterialコンポーネントで使用されます。