Jack In The Box (ジャックインザボックス)

要素が行き過ぎてから落ち着くバウンドで登場します。拡大して現れるか、端から落ちてきます。

[適用する場所]にバウンスイン(Bounce In)の登場アニメーションを追加してください。バウンスインダウン(bounce in down)、バウンスインアップ(bounce in up)とも呼ばれます。
要素が小さい状態から大きくなり、元のサイズを少し超えて何度か揺れてから落ち着くようにしてください。素早く、弾むように。
注意を引き続けないよう再生は一度だけにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きなしでその位置に表示してください。

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

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

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

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

要素が縮小され位置がずれた状態から、スライドして入り込み、元の大きさまで拡大します。

[適用する場所]にバックイン(Back In)の登場アニメーションを追加してください。バックインアップ(back in up)、バックインダウン(back in down)とも呼ばれます。
要素が縮小され少し薄くなった状態で画面の端の外から入ってきて、所定の位置に着いてから元の大きさに戻るようにしてください。素早く飛び出すのではなく、意図的な2段階の動きです。
再生は一度だけにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きなしでその位置に表示してください。

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

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

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

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

要素が大きくぼやけた透明な状態から縮んでくっきり見えるようになり、煙がふっと集まるように現れます。退場時はその逆です。

[適用する場所]にパフイン/パフアウト(Puff In / Puff Out)のアニメーションを追加してください。パフ(puff)とも呼ばれます。
現れるときは、大きくぼやけた透明な状態から縮み、煙がふっと落ち着くようにくっきり見えるようにし、去るときは再びぼやけながら膨らんで消えるようにしてください。やわらかく、やや素早く。
拡大した状態でレイアウトを押し広げたりスクロールバーを出したりしないようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は即座に切り替えてください。