Fade Out Directional (ディレクショナルフェードアウト)

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

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

要素が片側から少しだけ移動して最終位置に収まりながらフェードインします。

[適用する場所]にディレクショナルフェードイン(Fade In Directional)の登場アニメーションを追加してください。フェードインレフト(fade in left)、フェードインライト(fade in right)、フェードインダウン(fade in down)とも呼ばれます。
要素が片側から少しだけ移動して最終位置に収まりながらフェードインするようにしてください。素早く滑らかに、着地で減速し、弾みはなしで。
再生は一度だけにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きなしでその位置に表示してください。

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

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

要素が縮みながら端の方へスライドし、フェードアウトします。

[適用する場所]にバックアウト(Back Out)の退場アニメーションを追加してください。
要素がまずその場で少し縮み、それから端の方へスライドしながらフェードアウトするようにしてください。一度で素早く消えるのではなく、意図的な2段階の退場です。
レイアウトが動きの途中で跳ねないよう、アニメーションが終わってから要素を取り除き、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はすぐに取り除いてください。

要素が少し浮き上がりながらフェードインし、所定の位置に落ち着くように見えます。

[適用する場所]にフェードアップ(Fade Up)の登場アニメーションを追加してください。フェードインアップ(fade-in-up)、スクロールリビール(reveal on scroll)とも呼ばれます。
要素が初めて画面に入ったとき、少し浮き上がりながらフェードインするようにしてください。控えめで素早く、弾むような動きは不要です。
再生は一度だけにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きなしで表示してください。

要素が故障したネオンサインのように素早く明滅してから、点灯したままになります。

[適用する場所]にフリッカーイン(Flicker In)の登場アニメーションを追加してください。
故障したネオンサインのように、要素が不規則な間隔で何度か点いたり消えたりしてから、点灯したままになるようにしてください。くっきりした明滅で、位置は動かしません。
再生は一度だけにし、光の点滅に敏感な人にも安全なよう明滅の回数は少なく、速すぎないようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は点灯した状態で表示してください。

要素がY軸を中心に1回転しながら、少し手前に近づいて元に戻ります。

[適用する場所]にフリップ(Flip)のアニメーションを追加してください。
要素が縦軸を中心に1回転しながら少し手前に近づき、わずかに小さくなってから元に戻るようにしてください。生き生きと、でも短く。
回転に奥行きが感じられるよう遠近感(perspective)をつけ、ループではなく一度だけ再生し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は回転を省いてください。