Modal Scale-Fade In (モーダルスケールフェードイン)
別名 Dialog open animation, Zoom-fade dialog
暗くなったページの上で、ダイアログが中心から少し拡大しながらフェードインします。
使いどころ
確認ダイアログ、オーバーレイ内のフォーム
バリエーション
- scale + fade from center
- fade only
- slide-up on mobile
プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にモーダルスケールフェードイン(Modal Scale-Fade In)のアニメーションを追加してください。ダイアログオープンアニメーション(dialog open animation)、ズームフェードダイアログ(zoom-fade dialog)とも呼ばれます。
背後のページが暗くなるのに合わせて、ダイアログが中心から少し拡大しながらフェードインするようにしてください。素早く控えめに、弾みはなしです。
ダイアログを開くたびに一度だけ再生し、フォーカスをダイアログに移してその中に保ち、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は単純なフェードだけにしてください。