notifications-toasts

通知とトーストのアニメーション原則

ディズニーの12の原則を通知に適用し、目を引きながらも邪魔にならないアラートを作成します。

通知に適用する原則

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

トーストは、表示時の衝撃でわずかに圧縮し、その後元に戻ります。画面外から到着したかのような「着地感」を生み出します。

2. アンティシペーション

自動で閉じる前に、トーストを100msの間、わずかに縮小（95%のスケール）できます。ユーザーにまもなく閉じることを知らせます。

3. ステージング

通知は一貫した位置に表示します。色やアイコンを使い、情報、成功、警告、エラーの重要度を表します。

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

表示状態を、入場中、表示中、退場中、積み重ね中と定義します。入場、注目（必要な場合）、退場のキーフレームを明確にします。

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

コンテナーの到着後にアイコンをアニメーションさせます（チェックマークを描画する、ベルを揺らすなど）。自動で閉じるまでのプログレスバーは、トーストの入場に続いて表示します。

6. イーズイン＆イーズアウト

入場：ease-out（速く始まり、ゆっくり落ち着きます）。退場：ease-in（ゆっくり始まり、速く消えます）。バウンスには cubic-bezier(0.68, -0.55, 0.27, 1.55) を使用します。

7. アーク

隅からスライドするトーストは、わずかな弧を描くように動かします。ベルのアイコンは、硬直した回転ではなく、弧を描くように揺らします。

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

トーストがスライドして入場する（プライマリー）間に、影を表示し（セカンダリー）、アイコンをアニメーションさせ（ターシャリー）、プログレスバーを開始します（クォータナリー）。

9. タイミング

• トーストの入場：200～300ms
• トーストの退場：150～250ms
• 自動で閉じるまでの遅延：3000～5000ms
• 注目を促すパルス：1000msのループ
• 成功を示すチェックマークの描画：300ms
• スタックの並べ替え：200ms

10. 誇張

エラー通知は、揺らしたり赤く点滅させたりできます。重要なアラートには、より大きく目立つアニメーションを使用できます。緊急度を重要度に合わせます。

11. しっかりした描画

トーストのサイズを一定に保ちます。アイコンは鮮明に表示します。プログレスバーは、幅ではなく変形を使用して滑らかに動かします。

12. アピール

滑らかな通知は、洗練された印象を与えます。唐突なポップアップはユーザーを苛立たせます。アニメーションが適切なトーストは、プロフェッショナルな印象を伝えます。

CSS の実装

.toast {
  animation: toastEnter 300ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.toast.exiting {
  animation: toastExit 200ms ease-in forwards;
}

@keyframes toastEnter {
  from {
    opacity: 0;
    transform: translateY(-100%) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes toastExit {
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

.toast-progress {
  transform-origin: left;
  animation: progress 4000ms linear forwards;
}

主なプロパティ

• transform：移動、拡大・縮小
• opacity：フェード
• animation：入場／退場のシーケンス
• transform-origin：プログレスバーの変形起点
• box-shadow：奥行き