Slide Out (スライドアウト)

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

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

要素が斜めに傾き、フェードアウトしながら横へ高速で去っていきます。

[適用する場所]にライトスピードアウト(Light Speed Out)の退場アニメーションを追加してください。lightspeed out とも呼ばれます。
要素が斜めに傾き、フェードアウトしながら横へ高速で去っていくようにしてください。速く、去るにつれて加速させてください。
端を越えるときに横スクロールバーが出ないようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はすぐに非表示にしてください。

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

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

下にスクロールするとヘッダーが隠れ、上にスクロールすると再び現れます。

[適用する場所]にスクロールで隠れるヘッダー(Hide on Scroll Header)を追加してください。ヘッドルーム(headroom)、自動で隠れるナビバー(auto-hide navbar)とも呼ばれます。
下にスクロールするとヘッダーが上へスライドして隠れ、少しでも上にスクロールすると戻ってくるようにしてください。素早くなめらかに、距離ではなく方向に反応させます。
ページの一番上では常に表示し、スクロールのわずかなぶれは無視し、ヘッダー内の要素にキーボードフォーカスがある間は表示したままにしてください。

グループ内の項目が少しずつ遅れて順番に動き、一度に現れるのではなく波のように連なります。

[適用する場所]にスタッガー(Stagger)アニメーションを追加してください。スタッガードアニメーション(staggered animation)、カスケード(cascade)とも呼ばれます。
項目が短く均等な間隔で一つずつ順番に浮き上がって現れ、一度にではなく素早い波のように見えるようにしてください。
項目が多くても全体が短く終わるようにし、画面に入ったときに一度だけ再生し、モーションを減らす設定(prefers-reduced-motion)の場合は動きなしで表示してください。

要素が一点から回転しながら拡大し、フェードインします。

[適用する場所]にスワールイン(Swirl In)の登場アニメーションを追加してください。swirl in forward とも呼ばれます。
要素が一点から本来の大きさまで拡大しつつ、一回転を大きく超えて回転しながらフェードインするようにしてください。最初は速く、落ち着くにつれて減速させてください。
グループ全体ではなく1つの要素だけに一度だけ再生し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きなしでその位置に表示してください。

文字が大きく間隔を空けた薄い状態から始まり、現れながら通常の字間に詰まっていきます。

[適用する場所]にトラッキングイン(Tracking In)のテキストアニメーションを追加してください。text tracking in、letter-spacing in とも呼ばれます。
文字が大きく間隔を空けた薄い状態から始まり、完全に見えるようになりながら通常の字間まで詰まっていくようにしてください。なめらかに、最後は減速させてください。
字間が変わる間もテキストを中央揃えの1行に保って周りのレイアウトがずれないようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は通常の字間で表示してください。