モーダルダイアログの表示イージング

モーダル表示イージング

モーダルダイアログは通常、既存のコンテンツの上に表示され注目を集めます。表示アニメーションは素早いが不快でないものにする必要があります。

推奨カーブ

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

これはMaterial Designの減速カーブです。フル速度で開始し、徐々に減速するため、ビューポートに入る要素に最適です。

モーダルに減速を使う理由

モーダルが表示されるとき、ユーザーは新しいコンテンツが到着したことを素早く理解する必要があります。速い開始が注目を集め、緩やかな減速がモーダルに重量感と安定感を与えます。

一般的なアニメーションプロパティ

.modal-backdrop {
  opacity: 0;
  transition: opacity 200ms ease-out;
}
.modal-backdrop.visible {
  opacity: 1;
}

.modal-content {
  opacity: 0;
  transform: scale(0.95) translateY(10px);
  transition: opacity 300ms cubic-bezier(0, 0, 0.2, 1),
              transform 300ms cubic-bezier(0, 0, 0.2, 1);
}
.modal-content.visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}

閉じるアニメーション

モーダルを閉じるときは、加速カーブ（cubic-bezier(0.4, 0, 1, 1)）を使用します。モーダルが去るにつれて速度が上がり、却下された感触を作ります。

.modal-content.closing {
  opacity: 0;
  transform: scale(0.95);
  transition: all 200ms cubic-bezier(0.4, 0, 1, 1);
}