Roll In (ロールイン)

要素が角または中心を軸に回転しながらフェードインします。

[適用する場所]にローテートイン(Rotate In)の登場アニメーションを追加してください。rotate in down left とも呼ばれます。
要素が傾いた角度から左下の角を軸に回転して所定の位置に収まり、同時にフェードインするようにしてください。なめらかにゆったりと、落ち着くときに減速させてください。
再生は一度だけにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きなしでその位置に表示してください。

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

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

要素が右へ転がりながらフェードアウトします。

[適用する場所]にロールアウト(Roll Out)の退場アニメーションを追加してください。
要素が車輪のように回転しながら右へ転がっていき、同時にフェードアウトするようにしてください。なめらかに、去るにつれて加速させてください。
転がり去ってからレイアウトから取り除き、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はすぐに非表示にしてください。

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

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

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

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