modals-dialogs

モーダルとダイアログのアニメーション原則

ディズニーの12の原則をモーダルに適用し、シームレスで唐突さのない遷移を実現します。

モーダルに適用する原則

1. スクワッシュ＆ストレッチ

表示時にモーダルを0.9から1.0へ拡大し、わずかに膨らむような感覚を演出できます。非表示時は逆の動きにします。プロフェッショナルな印象を保つため、控えめにしてください。

2. 予備動作

モーダルが表示される前に、トリガー要素（ボタン）を反応させます。トリガーを短く縮小させてから、その位置からモーダルを出現させます。

3. 演出

背景を暗く（不透明度0.5～0.7）して、モーダルに注意を集中させます。背景コンテンツにわずかなぼかし（4～8px）を加えることもできます。主役はモーダルです。

4. ストレート・アヘッドとポーズ・トゥ・ポーズ

非表示、表示中、表示、非表示中の状態を定義します。それぞれに明確なキーフレームを設定します。ポーズ・トゥ・ポーズにより、予測可能で制御しやすいアニメーションになります。

5. フォロースルーとオーバーラッピング・アクション

まずモーダルコンテナーを表示し、その50～100ms後にコンテンツをフェードインさせます。閉じるボタンの動きには、最後にわずかな弾みを加えることもできます。フォームの各項目は順に表示します。

6. スローインとスローアウト

表示時はease-out（減速しながら進む）、非表示時はease-in（加速しながら進む）を使います。表示時には、滑らかで弾むような動きになるcubic-bezier(0.16, 1, 0.3, 1)を使います。

7. アーク

モーダルがボタンから出現する場合は、直線ではなく中心に向かう弧を描かせます。より自然な動きの軌跡になります。

8. セカンダリー・アクション

モーダルが拡大して表示される間（プライマリー）、背景をフェードさせ（セカンダリー）、コンテンツを順に表示します（ターシャリー）。それぞれが競合せずに動きを引き立てます。

9. タイミング

• 背景のフェード：200～250ms
• モーダルの表示：250～350ms
• モーダルの非表示：200ms（表示時より速く）
• コンテンツの順次表示：項目ごとに30～50ms
• エラー時のシェイク：300ms

10. 誇張

重要なアラートには、印象的な登場アニメーションを使います。拡大率をわずかに行き過ぎさせて（1.02）、その後1.0に落ち着かせます。エラーモーダルは短く揺らすこともできます。

11. 立体感のある描画

モーダルの影は、インターフェースの光源と一致させます。角丸の半径を一貫させます。アニメーション中にコンテンツがはみ出さないようにしてください。

12. アピール

滑らかな表示は洗練された印象を与えます。起点から動かすアニメーションは、周囲とのつながりを感じさせます。唐突なモーダルは違和感を与えます。モーダルの遷移にはこだわりましょう。

CSS の実装

.modal-backdrop {
  transition: opacity 250ms ease-out;
}

.modal {
  animation: modalEnter 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalEnter {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

主なプロパティ

• transform：拡大縮小、移動（起点）
• opacity：フェードイン／フェードアウト
• backdrop-filter：背景のぼかし
• animation：キーフレームのシーケンス
• transform-origin：起点