Scale-In モーダルオープンエフェクト

2拍子のスケール

Apple の HIG ではほぼすべてのモーダル提示に 92%→100% のスケールカーブと opacity を組み合わせています。View Transitions API なら短い @keyframes 2つで再現可能です:

.modal {
  view-transition-name: modal;
}
@keyframes scale-out {
  to { transform: scale(0.92); opacity: 0; }
}
@keyframes scale-in {
  from { transform: scale(0.92); opacity: 0; }
}
::view-transition-old(modal) {
  animation: 200ms ease-out both scale-out;
}
::view-transition-new(modal) {
  animation: 250ms cubic-bezier(0.16, 1, 0.3, 1) both scale-in;
}

非対称な duration

out アニメーションが 200ms、in が 250ms と非対称です。非対称な duration はより自然に感じられます。退出はキビキビ、登場は穏やかな ease-out で到着すべきです。これは知覚モデルにも合致します。ユーザーは閉じる動作を即応的に、開く動作を意図的に感じたいのです。

バックドロップブラーとの組み合わせ

モーダルがスケールインする際、バックドロップ要素には通常の CSS transition で opacity を並行アニメーションさせます。バックドロップは独自の view-transition-name を持たないためルートグループに参加し、自動的にクロスフェードされます。二重アニメーション競合は起きません。

ピクセルスナッピングのアーティファクト回避

92% からのスケーリングはテキストにサブピクセル描画グリッチを生むことがあります。トランジション中だけ will-change: transform を付け、終了後に外すか、transform: translate3d(0,0,0) を内部コンテンツに付けて GPU コンポジットを強制します。