Bounce In (バウンスイン)
別名 Bounce In Down, Bounce In Up
要素が行き過ぎてから落ち着くバウンドで登場します。拡大して現れるか、端から落ちてきます。
使いどころ
通知バッジ、遊び心のあるモーダル
バリエーション
- center
- down
- up
- left
- right
プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にバウンスイン(Bounce In)の登場アニメーションを追加してください。バウンスインダウン(bounce in down)、バウンスインアップ(bounce in up)とも呼ばれます。
要素が小さい状態から大きくなり、元のサイズを少し超えて何度か揺れてから落ち着くようにしてください。素早く、弾むように。
注意を引き続けないよう再生は一度だけにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きなしでその位置に表示してください。似ているモーション
A
Back In (バックイン)
別名 Back In Up, Back In Down
要素が縮小され位置がずれた状態から、スライドして入り込み、元の大きさまで拡大します。
使いどころ
ヒーロー要素、カード
[適用する場所]にバックイン(Back In)の登場アニメーションを追加してください。バックインアップ(back in up)、バックインダウン(back in down)とも呼ばれます。
要素が縮小され少し薄くなった状態で画面の端の外から入ってきて、所定の位置に着いてから元の大きさに戻るようにしてください。素早く飛び出すのではなく、意図的な2段階の動きです。
再生は一度だけにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きなしでその位置に表示してください。A
要素が小さく傾いた状態から飛び出し、行き過ぎてから、びっくり箱のおもちゃのように落ち着きます。
使いどころ
サプライズ的な表示
[適用する場所]にジャックインザボックス(Jack In The Box)の登場アニメーションを追加してください。
要素が下端を支点に、とても小さく傾いた状態から飛び出し、まっすぐな位置を越えて左右に揺れてから落ち着くようにしてください。弾むように、遊び心たっぷりに。
再生は一度だけにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きなしでその位置に表示してください。A
Zoom In (ズームイン)
別名 Scale In, Zoom In Up, Zoom In Down
要素が小さく透明な状態から本来の大きさまで拡大しながらフェードインします。
使いどころ
モーダル、画像ライトボックス、ポップオーバー
[適用する場所]にズームイン(Zoom In)の登場アニメーションを追加してください。スケールイン(scale in)とも呼ばれます。
要素が小さく透明な状態から本来の大きさまで拡大しながらフェードインするようにしてください。素早くなめらかに、行き過ぎはなしで。
周りのレイアウトに影響しないよう中心から拡大し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きなしでその位置に表示してください。A
マウスを乗せてください
Bounce Scale (バウンススケール)
別名 Bounce In / Out
ホバーの開始時や終了時に、要素が弾むように少し行き過ぎながら拡大・縮小します。
使いどころ
ボタン、バッジ
[適用する場所]にバウンススケール(Bounce Scale)のホバーエフェクトを追加してください。バウンスイン/アウト(bounce in / out)とも呼ばれます。
要素が弾むように少し大きくなり、最終サイズを一瞬はっきり行き過ぎてから落ち着き、ポインターが離れたら同じように弾んで戻るようにしてください。
周りのレイアウトがずれないようにし、キーボードフォーカスでも同じ効果を出してください。Entrance & Exitのほかのモーション
A
要素が軽く弾んでから、縮んで消えるか端の外へ飛んでいきます。
使いどころ
遊び心のある閉じる動作
[適用する場所]にバウンスアウト(Bounce Out)の退場アニメーションを追加してください。
要素が少し沈み、元のサイズを少し超えて膨らんでから、縮みながらフェードアウトするようにしてください。短く、弾むように。
アニメーションが終わってからレイアウトから取り除き、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はすぐに隠してください。A
Clip Reveal (クリップリビール)
別名 Image Reveal, Mask Reveal, Clip-path Reveal, Wipe Reveal
clip-path やマスクが端や一点から広がり、画像やテキストが少しずつ現れます。
使いどころ
画像や見出しの表示
[適用する場所]にクリップリビール(Clip Reveal)の登場エフェクトを追加してください。マスクリビール(mask reveal)、ワイプリビール(wipe reveal)、イメージリビール(image reveal)とも呼ばれます。
切り抜きの境界が左から右へ移動し、コンテンツ自体は動かずに少しずつ見えてくるようにしてください。滑らかに、始まりと終わりは柔らかく。
何もずれないよう最初から要素の領域を確保し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は全体を表示した状態にしてください。A
要素がその場で完全な透明から完全な不透明へ変わり、退場時はその逆になります。
使いどころ
モーダル、トースト、ページコンテンツの表示
[適用する場所]にフェードイン/フェードアウト(Fade In / Fade Out)のアニメーションを追加してください。フェード(fade)とも呼ばれます。
現れるときは要素がその場で完全な透明からはっきり見える状態へ変わり、消えるときは同じようにフェードアウトするようにしてください。穏やかに、移動や拡大縮小はなしで。
消えた後はクリックもキーボード操作もできないようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は瞬時に切り替えてください。