Hinge (ヒンジ)

要素が上端を支点に振り子のように左右に揺れ、揺れ幅がだんだん小さくなります。

[適用する場所]にスイング(Swing)のアテンション効果を追加してください。
要素が吊り下げ看板のように左右に揺れ、最初は大きく揺れてすぐに収まるようにしてください。
中心ではなく上端を支点にして揺らし、トリガーされたら一度だけ再生してください。

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

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

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

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

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

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

要素が斜めに傾いた状態で横から勢いよく飛び込み、着地とともにまっすぐになります。

[適用する場所]にライトスピードイン(Light Speed In)の登場アニメーションを追加してください。lightspeed in とも呼ばれます。
要素が高速で移動しているように斜めに傾いたまま横から勢いよく飛び込み、傾きを一度だけ反対側へ行き過ぎさせてから、着地とともにまっすぐになるようにしてください。速くドラマチックに、最後は減速させてください。
画面外にある間に横スクロールバーが出ないようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きなしでその位置に表示してください。

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

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