CSSモーダルアニメーション15種｜コピペ+AIプロンプト
モーダルは、閲覧者の作業を中断して前に出る要素です。だからこそ開き方と閉じ方が乱暴だと、驚きや不快感につながります。ここでは重ねて表示する系のUIを15種類集めました。ブラウザ標準の Popover API を使う新しい実装も含め、開閉の演出とフォーカス管理の両面から選べるようにしています。
モーダル・ドロワー · 15 EFFECTS
実装の勘所
閉じる手段を3つ用意する
閉じるボタン、背景クリック、Escキーの3つが揃って初めて「閉じられる」と感じられます。Popover API を使うと後ろ2つは標準で付いてきます。
背面のスクロールを止める
モーダルを開いたまま背後のページがスクロールすると、閉じたときに位置が変わって混乱します。body に overflow: hidden を当てるか、ダイアログ要素の showModal() を使ってください。
フォーカスを閉じ込める
開いている間、Tabキーでモーダルの外へ出られてしまうと、キーボード操作では実質的に使えません。dialog の showModal() は標準でフォーカスを閉じ込めます。自前実装の場合は先頭と末尾で循環させる処理が必要です。
FAQ
Q. dialog 要素と Popover API はどう使い分けますか？
背後の操作を完全にブロックしたい確認ダイアログや入力フォームには dialog の showModal() を使います。ドロップダウンメニュー・ツールチップ・トーストのように「軽く出して外側クリックで閉じる」ものには Popover API が適しています。どちらもトップレイヤーに描画されるため、z-index の競合が起きません。
Q. モーダルのアニメーションが効かないのはなぜですか？
display の切り替えを伴うためです。display:none からの変化には開始値が無く、トランジションが起動しません。@starting-style で開始値を宣言し、transition に display と overlay を allow-discrete で含めると、開閉の両方でアニメーションします。
Q. コードは無料で使えますか？
はい。Motion Lab のコードスニペットとAIプロンプトは、クレジット表記なしで自由に使えます。商用プロジェクトでもそのまま利用できます。
他のカテゴリを見る
全199種類を技術別（CSS / JS / Tailwind / Framer Motion / GSAP）で絞り込むなら カタログ一覧、 長文の解説を読むなら ガイド、 AIエージェントでの実装手順は Claude Code でWebアニメーションを実装する へ。
BOOKS · PR · AMAZON
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
学びを止めない · AMAZONサブスクPR
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
CREATOR TOOLS · スクール（PR）
※本サイトはアフィリエイトリンクを含みます。リンク経由のご購入・お申し込みで運営者が紹介料を受け取る場合があります。