Back Out (バックアウト)

要素が軽く弾んでから、縮んで消えるか端の外へ飛んでいきます。

[適用する場所]にバウンスアウト(Bounce Out)の退場アニメーションを追加してください。
要素が少し沈み、元のサイズを少し超えて膨らんでから、縮みながらフェードアウトするようにしてください。短く、弾むように。
アニメーションが終わってからレイアウトから取り除き、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はすぐに隠してください。

要素が縮みながらフェードアウトし、消えていきます。

[適用する場所]にズームアウト(Zoom Out)の退場アニメーションを追加してください。スケールアウト(scale out)とも呼ばれます。
要素が中心に向かって縮みながらフェードアウトし、消えるようにしてください。素早く、進むにつれて加速させてください。
完全に消えてからレイアウトとキーボードフォーカスから外し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はすぐに非表示にしてください。

要素がコンテナの端の外へすべり出て消えます。

[適用する場所]にスライドアウト(Slide Out)の退場アニメーションを追加してください。slide out up、slide out down とも呼ばれます。
要素が完全に不透明なままコンテナの端の外へすべり出て消えるようにしてください。素早く、去るにつれて加速させてください。
コンテナの端で切り取り、見えなくなったらキーボードやスクリーンリーダーからも隠し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はすぐに非表示にしてください。

要素が一方向へ流れるように移動しながらフェードアウトします。

[適用する場所]にディレクショナルフェードアウト(Fade Out Directional)の退場アニメーションを追加してください。フェードアウトアップ(fade out up)、フェードアウトダウン(fade out down)とも呼ばれます。
要素が一方向へ少しだけ移動しながらフェードアウトするようにしてください。素早く、去るにつれて加速します。
周りのコンテンツが早く詰まらないよう、フェードが終わってからレイアウトから取り除き、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はすぐに隠してください。

要素が強くぼやけた状態から徐々にピントが合い、多くの場合スライドやフェードインを伴います。

[適用する場所]にブラーイン(Blur In)の登場アニメーションを追加してください。テキストフォーカスイン(text focus in)、フォーカスイン(focus in)、ブラーテキストリビール(blur text reveal)とも呼ばれます。
コンテンツが強くぼやけて透明な状態から、その場でピントが合っていくようにしてください。柔らかくややゆっくりで、位置は動かしません。
再生は一度だけにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は最初からくっきり表示してください。

要素がフェードアウトやスライドをしながら、だんだんぼやけていきます。

[適用する場所]にブラーアウト(Blur Out)の退場アニメーションを追加してください。テキストブラーアウト(text blur out)、スモーキーテキストディシペイト(smoky text dissipate)とも呼ばれます。
コンテンツがその場でだんだんぼやけながらフェードアウトするようにしてください。溶けて消えるように、柔らかくややゆっくりと。
ぼかしが終わってから要素を隠すか取り除き、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はすぐに隠してください。

要素が行き過ぎてから落ち着くバウンドで登場します。拡大して現れるか、端から落ちてきます。

[適用する場所]にバウンスイン(Bounce In)の登場アニメーションを追加してください。バウンスインダウン(bounce in down)、バウンスインアップ(bounce in up)とも呼ばれます。
要素が小さい状態から大きくなり、元のサイズを少し超えて何度か揺れてから落ち着くようにしてください。素早く、弾むように。
注意を引き続けないよう再生は一度だけにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きなしでその位置に表示してください。