Rotate In (ローテートイン)

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

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

要素が車輪のように左から転がりながらフェードインします。

[適用する場所]にロールイン(Roll In)の登場アニメーションを追加してください。
要素が車輪のように回転しながら左から転がり込み、同時にフェードインするようにしてください。なめらかに、着地に向けて減速させてください。
再生は一度だけにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きなしでその位置に表示してください。

要素が小さく傾いた状態から飛び出し、行き過ぎてから、びっくり箱のおもちゃのように落ち着きます。

[適用する場所]にジャックインザボックス(Jack In The Box)の登場アニメーションを追加してください。
要素が下端を支点に、とても小さく傾いた状態から飛び出し、まっすぐな位置を越えて左右に揺れてから落ち着くようにしてください。弾むように、遊び心たっぷりに。
再生は一度だけにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きなしでその位置に表示してください。

要素が支点を軸に回転しながらフェードアウトします。

[適用する場所]にローテートアウト(Rotate Out)の退場アニメーションを追加してください。
要素が中心を軸に半回転より少し多く回りながらフェードアウトするようにしてください。なめらかに、進むにつれて加速させてください。
回転が終わってから取り除き、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はすぐに非表示にしてください。

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

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

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

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