Entrance & Exit

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

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

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

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

要素が強くぼやけた状態から徐々にピントが合い、多くの場合スライドやフェードインを伴います。

[適用する場所]にブラーイン(Blur In)の登場アニメーションを追加してください。テキストフォーカスイン(text focus in)、フォーカスイン(focus in)、ブラーテキストリビール(blur text reveal)とも呼ばれます。
コンテンツが強くぼやけて透明な状態から、その場でピントが合っていくようにしてください。柔らかくややゆっくりで、位置は動かしません。
再生は一度だけにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は最初からくっきり表示してください。

要素がフェードアウトやスライドをしながら、だんだんぼやけていきます。

[適用する場所]にブラーアウト(Blur Out)の退場アニメーションを追加してください。テキストブラーアウト(text blur out)、スモーキーテキストディシペイト(smoky text dissipate)とも呼ばれます。
コンテンツがその場でだんだんぼやけながらフェードアウトするようにしてください。溶けて消えるように、柔らかくややゆっくりと。
ぼかしが終わってから要素を隠すか取り除き、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はすぐに隠してください。

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

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

要素が軽く弾んでから、縮んで消えるか端の外へ飛んでいきます。

[適用する場所]にバウンスアウト(Bounce Out)の退場アニメーションを追加してください。
要素が少し沈み、元のサイズを少し超えて膨らんでから、縮みながらフェードアウトするようにしてください。短く、弾むように。
アニメーションが終わってからレイアウトから取り除き、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はすぐに隠してください。

clip-path やマスクが端や一点から広がり、画像やテキストが少しずつ現れます。

[適用する場所]にクリップリビール(Clip Reveal)の登場エフェクトを追加してください。マスクリビール(mask reveal)、ワイプリビール(wipe reveal)、イメージリビール(image reveal)とも呼ばれます。
切り抜きの境界が左から右へ移動し、コンテンツ自体は動かずに少しずつ見えてくるようにしてください。滑らかに、始まりと終わりは柔らかく。
何もずれないよう最初から要素の領域を確保し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は全体を表示した状態にしてください。

要素がその場で完全な透明から完全な不透明へ変わり、退場時はその逆になります。

[適用する場所]にフェードイン/フェードアウト(Fade In / Fade Out)のアニメーションを追加してください。フェード(fade)とも呼ばれます。
現れるときは要素がその場で完全な透明からはっきり見える状態へ変わり、消えるときは同じようにフェードアウトするようにしてください。穏やかに、移動や拡大縮小はなしで。
消えた後はクリックもキーボード操作もできないようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は瞬時に切り替えてください。

要素が片側から少しだけ移動して最終位置に収まりながらフェードインします。

[適用する場所]にディレクショナルフェードイン(Fade In Directional)の登場アニメーションを追加してください。フェードインレフト(fade in left)、フェードインライト(fade in right)、フェードインダウン(fade in down)とも呼ばれます。
要素が片側から少しだけ移動して最終位置に収まりながらフェードインするようにしてください。素早く滑らかに、着地で減速し、弾みはなしで。
再生は一度だけにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きなしでその位置に表示してください。

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

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

要素が少し浮き上がりながらフェードインし、所定の位置に落ち着くように見えます。

[適用する場所]にフェードアップ(Fade Up)の登場アニメーションを追加してください。フェードインアップ(fade-in-up)、スクロールリビール(reveal on scroll)とも呼ばれます。
要素が初めて画面に入ったとき、少し浮き上がりながらフェードインするようにしてください。控えめで素早く、弾むような動きは不要です。
再生は一度だけにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きなしで表示してください。

要素が故障したネオンサインのように素早く明滅してから、点灯したままになります。

[適用する場所]にフリッカーイン(Flicker In)の登場アニメーションを追加してください。
故障したネオンサインのように、要素が不規則な間隔で何度か点いたり消えたりしてから、点灯したままになるようにしてください。くっきりした明滅で、位置は動かしません。
再生は一度だけにし、光の点滅に敏感な人にも安全なよう明滅の回数は少なく、速すぎないようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は点灯した状態で表示してください。

要素がY軸を中心に1回転しながら、少し手前に近づいて元に戻ります。

[適用する場所]にフリップ(Flip)のアニメーションを追加してください。
要素が縦軸を中心に1回転しながら少し手前に近づき、わずかに小さくなってから元に戻るようにしてください。生き生きと、でも短く。
回転に奥行きが感じられるよう遠近感(perspective)をつけ、ループではなく一度だけ再生し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は回転を省いてください。

要素が横軸または縦軸を中心に3D回転し、真横を向いた状態から正面を向きます。

[適用する場所]にフリップイン(Flip In)の登場アニメーションを追加してください。フリップインX(flip in X)、フリップインY(flip in Y)とも呼ばれます。
要素が真横を向いた状態から横軸を中心に回転して正面を向き、少し行き過ぎて戻ってから落ち着くようにしてください。素早く、小さな揺れを伴って。
回転に奥行きが感じられるよう遠近感(perspective)をつけ、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きなしで正面を向いた状態で表示してください。

要素が3D回転し、真横を向いて見えなくなります。

[適用する場所]にフリップアウト(Flip Out)の退場アニメーションを追加してください。フリップアウトX(flip out X)、フリップアウトY(flip out Y)とも呼ばれます。
要素が少し後ろに傾いてから、縦軸を中心に回転して真横を向き、消えるようにしてください。素早く、キレよく。
回転に奥行きが感じられるよう遠近感(perspective)をつけ、回転が終わってから要素を取り除き、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はすぐに隠してください。

要素が左上の角を蝶番にして振れ、ぶら下がって揺れたあと画面の外へ落ちていきます。

[適用する場所]にヒンジ(Hinge)の退場アニメーションを追加してください。
ネジが外れたように要素が左上の角を支点に垂れ下がり、左右に揺れてから、フェードアウトしながら画面の外へ落ちるようにしてください。ゆっくり、コミカルに、意図的に。
レイアウトを押し広げたりスクロールバーを出したりせずに他のコンテンツの上を落ちるようにし、落ちきったら取り除き、ユーザーがモーションを減らす設定(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)にしている場合はすぐに非表示にしてください。

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

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

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

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

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

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

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

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

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

[適用する場所]にスタッガー(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)にしている場合は通常の字間で表示してください。

要素が小さく透明な状態から本来の大きさまで拡大しながらフェードインします。

[適用する場所]にズームイン(Zoom In)の登場アニメーションを追加してください。スケールイン(scale in)とも呼ばれます。
要素が小さく透明な状態から本来の大きさまで拡大しながらフェードインするようにしてください。素早くなめらかに、行き過ぎはなしで。
周りのレイアウトに影響しないよう中心から拡大し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きなしでその位置に表示してください。

要素が縮みながらフェードアウトし、消えていきます。

[適用する場所]にズームアウト(Zoom Out)の退場アニメーションを追加してください。スケールアウト(scale out)とも呼ばれます。
要素が中心に向かって縮みながらフェードアウトし、消えるようにしてください。素早く、進むにつれて加速させてください。
完全に消えてからレイアウトとキーボードフォーカスから外し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はすぐに非表示にしてください。