Fade In Directional (ディレクショナルフェードイン)

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

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

要素がコンテナの端の外側から定位置まで、フェードせずにすべり込みます。

[適用する場所]にスライドイン(Slide In)の登場アニメーションを追加してください。slide in left、slide in right、slide in up、slide in down とも呼ばれます。
要素がコンテナの端の外側から定位置まですべり込み、その間ずっと完全に不透明のままにしてください。素早く、弾まずになめらかに減速させてください。
外にある間は隣の要素に重なったりスクロールバーが出たりしないようコンテナの端で切り取り、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は最初からその位置に表示してください。

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

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

短いメッセージが画面の端からスライドまたはフェードで現れ、しばらく表示されてから消えます。重なったトーストは場所を空けるようにずれます。

[適用する場所]にトーストスライドイン(Toast Slide-In)を追加してください。スナックバー(snackbar)、トースト通知(toast notification)とも呼ばれます。
各メッセージは画面の端からスライドアップしながらフェードインし、なめらかに減速させてください。新しいトーストが来たら、表示中のものがなめらかにずれて場所を空けるようにしてください。
フォーカスを奪わずにスクリーンリーダーへメッセージを伝え、読めるだけの時間表示し、ホバーやフォーカス中は自動で閉じるのを一時停止してください。

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

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