CSSモーダルアニメーション8種｜コピペ+AIプロンプト

モーダルは、閲覧者の作業を中断して前に出る要素です。だからこそ開き方と閉じ方が乱暴だと、驚きや不快感につながります。ここでは重ねて表示する系のUIを8種類集めました。ブラウザ標準の Popover API を使う新しい実装も含め、開閉の演出とフォーカス管理の両面から選べるようにしています。

モーダル・ドロワー · 8 EFFECTS

No.042MODAL FADECSSJS No.043SLIDE DRAWERCSSJS No.044BOTTOM SHEETCSSJS No.067FRAMER ANIMATE PRESENCECSSJSFRAMER No.076MODAL SCALE BLURCSSJS No.077TOAST NOTIFICATIONCSSJS No.105FRAMER MODALCSSJSFRAMER No.119POPOVER API MENUCSS

実装の勘所

閉じる手段を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プロンプトは、クレジット表記なしで自由に使えます。商用プロジェクトでもそのまま利用できます。

他のカテゴリを見る

テキストアニメーション 21 ホバーエフェクト 8 スクロールアニメーション 15 マイクロインタラクション 19 カードアニメーション 15 背景アニメーション 14 ボタンアニメーション 10 ローディングアニメーション 7 トランジション・画面遷移 9 SVGアニメーション 8 カーソルエフェクト 6

全139種類を技術別（CSS / JS / Tailwind / Framer Motion / GSAP）で絞り込むならカタログ一覧、長文の解説を読むならガイド、 AIエージェントでの実装手順は Claude Code でWebアニメーションを実装するへ。

BOOKS · PR · AMAZON

📖 なかしまぁ先生のCSSアニメーション入門 📖 マイクロインタラクション ―UI/UXデザインの神が宿る細部 📖 Fundamentals of Web Animation with GSAP

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。