Zoom In (ズームイン)
別名 Scale In, Zoom In Up, Zoom In Down
要素が小さく透明な状態から本来の大きさまで拡大しながらフェードインします。
使いどころ
モーダル、画像ライトボックス、ポップオーバー
バリエーション
- center
- down
- left
- right
- up
プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にズームイン(Zoom In)の登場アニメーションを追加してください。スケールイン(scale in)とも呼ばれます。
要素が小さく透明な状態から本来の大きさまで拡大しながらフェードインするようにしてください。素早くなめらかに、行き過ぎはなしで。
周りのレイアウトに影響しないよう中心から拡大し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きなしでその位置に表示してください。似ているモーション
A
Modal Scale-Fade In (モーダルスケールフェードイン)
別名 Dialog open animation, Zoom-fade dialog
暗くなったページの上で、ダイアログが中心から少し拡大しながらフェードインします。
使いどころ
確認ダイアログ、オーバーレイ内のフォーム
[適用する場所]にモーダルスケールフェードイン(Modal Scale-Fade In)のアニメーションを追加してください。ダイアログオープンアニメーション(dialog open animation)、ズームフェードダイアログ(zoom-fade dialog)とも呼ばれます。
背後のページが暗くなるのに合わせて、ダイアログが中心から少し拡大しながらフェードインするようにしてください。素早く控えめに、弾みはなしです。
ダイアログを開くたびに一度だけ再生し、フォーカスをダイアログに移してその中に保ち、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は単純なフェードだけにしてください。A
要素が大きくぼやけた透明な状態から縮んでくっきり見えるようになり、煙がふっと集まるように現れます。退場時はその逆です。
使いどころ
オブジェクトのやわらかな出現
[適用する場所]にパフイン/パフアウト(Puff In / Puff Out)のアニメーションを追加してください。パフ(puff)とも呼ばれます。
現れるときは、大きくぼやけた透明な状態から縮み、煙がふっと落ち着くようにくっきり見えるようにし、去るときは再びぼやけながら膨らんで消えるようにしてください。やわらかく、やや素早く。
拡大した状態でレイアウトを押し広げたりスクロールバーを出したりしないようにし、ユーザーがモーションを減らす設定(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
マウスを乗せてください
Grow (グロウ)
別名 Scale Up, Zoom In on hover
ポインターが乗っている間、要素がなめらかに少し拡大します。
使いどころ
ボタン、リンク、サムネイル
[適用する場所]にグロウ(Grow)のホバーエフェクトを追加してください。スケールアップ(scale up)とも呼ばれます。
ポインターが乗っている間は要素がなめらかに少し拡大し、離れたら元のサイズに戻るようにしてください。素早く控えめに。
周りのレイアウトがずれないようにし、キーボードフォーカスでも同じ効果を出してください。Entrance & Exitのほかのモーション
A
Zoom Out (ズームアウト)
別名 Scale Out
要素が縮みながらフェードアウトし、消えていきます。
使いどころ
モーダルを閉じる、項目を消す
[適用する場所]にズームアウト(Zoom Out)の退場アニメーションを追加してください。スケールアウト(scale out)とも呼ばれます。
要素が中心に向かって縮みながらフェードアウトし、消えるようにしてください。素早く、進むにつれて加速させてください。
完全に消えてからレイアウトとキーボードフォーカスから外し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はすぐに非表示にしてください。A
要素が縮みながら端の方へスライドし、フェードアウトします。
使いどころ
カードを閉じるとき
[適用する場所]にバックアウト(Back Out)の退場アニメーションを追加してください。
要素がまずその場で少し縮み、それから端の方へスライドしながらフェードアウトするようにしてください。一度で素早く消えるのではなく、意図的な2段階の退場です。
レイアウトが動きの途中で跳ねないよう、アニメーションが終わってから要素を取り除き、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はすぐに取り除いてください。