I-001 Interaction medium

How to create a modal animation モーダルアニメーションの作り方

Modal that fades in and scales up. Adjust animation speed and direction. フェードインとスケールで表示されるモーダル。アニメーション速度と方向を調整できます。

modal dialog animation overlay

ライブデモ Live Demo

モーダルタイトル Modal Title

これはモーダルのコンテンツです。閉じるには背景をクリックするか、×ボタンをクリックしてください。 This is modal content. Click backdrop or × button to close.

0.3s

概要・用途・特徴Overview, Usage & Features

何ができるかWhat it does

Modal that fades in and scales up. Adjust animation speed and direction.

フェードインとスケールで表示されるモーダル。アニメーション速度と方向を調整できます。

どこで使うかWhere to use

user engagement, data entry, content management, settings panel

確認ダイアログ、写真ライトボックス、フォームオーバーレイ、情報パネル

特徴Key features

Accessible modal dialog with focus trap, Escape key dismissal, and scroll lock. Smooth open/close CSS animation. ARIA roles (dialog, aria-modal, aria-labelledby) built in. Backdrop click to close. Zero external libraries.

フォーカストラップ・Escキー閉鎖・スクロールロックを備えたアクセシブルモーダル。スムーズなオープン/クローズCSSアニメーション。ARIAロール（dialog・aria-modal・aria-labelledby）を組み込み。バックドロップクリックで閉鎖。外部ライブラリなし。

調整可能パラメータ Adjustable Parameters

Parameter Default Description
--modal-duration—animation duration
--modal-scale-from—initial scale value
backdrop blur—add blur effect to backdrop
enter direction—change slide direction (top, bottom, left, right)

実装コード Implementation Code 

// react/I-001.jsx
import { useState } from "react";
import "./I-001.css";

export default function ModalAnimation() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)}>Open Modal</button>
      {isOpen && (
        <div className="modal-backdrop active" onClick={() => setIsOpen(false)}>
          <div className="modal-content" onClick={(e) => e.stopPropagation()}>
            <button onClick={() => setIsOpen(false)}>×</button>
            <h3>Title</h3>
            <p>Content</p>
          </div>
        </div>
      )}
    </>
  );
}
/* react/I-001.css */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modal-backdrop.active {
  opacity: 1;
}
import { useState } from "react";
import "./I-001.css";

export default function ModalAnimation({ title = "Modal Title", children, onClose }) {
  const [isOpen, setIsOpen] = useState(false);

  const handleClose = () => {
    setIsOpen(false);
    if (onClose) onClose();
  };

  return (
    <>
      <button onClick={() => setIsOpen(true)}>Open Modal</button>
      {isOpen && (
        <div className="modal-backdrop active" onClick={handleClose}>
          <div className="modal-content" onClick={(e) => e.stopPropagation()}>
            <button className="modal-close" onClick={handleClose}>×</button>
            <h3>{title}</h3>
            {children}
          </div>
        </div>
      )}
    </>
  );
}
/* Modal styles are now in global.css */

仕組みとカスタマイズHow It Works & Customization

仕組みHow it works

The modal is hidden via display: none by default. On trigger, a show class applies display: flex and an entrance animation (fade + scale). A JavaScript focus trap cycles focus through focusable elements within the modal using Tab/Shift+Tab. Body scroll is locked via overflow: hidden on the <body> element.

モーダルはデフォルトでdisplay:noneで非表示。トリガー時にshowクラスがdisplay:flexと入場アニメーション（フェード+スケール）を適用。JavaScriptのフォーカストラップがTab/Shift+Tabでモーダル内のフォーカス可能要素を循環。<body>のoverflow:hiddenでボディスクロールをロック。

カスタマイズ方法Customization

Swap the scale animation for a translateY slide-down to change the modal entry direction. Adjust max-width to control modal size from compact to full-screen. Change backdrop opacity for a lighter veil. Add a close animation by reversing the open keyframes on exit.

スケールアニメーションをtranslateYスライドダウンに変えてモーダルの入場方向を変更。max-widthでコンパクトからフルスクリーンまでモーダルサイズを制御。バックドロップの不透明度を変更してより軽いベールに。終了時に入場キーフレームを逆再生してクローズアニメーションを追加。

注意点Caveats

Always return focus to the trigger element when the modal closes. Ensure the modal has role="dialog" and aria-modal="true". Screen readers must be aware of the modal boundary — avoid using inert on the backdrop rather than the main content area.

モーダルが閉じるときに必ずトリガー要素にフォーカスを戻してください。モーダルにrole="dialog"とaria-modal="true"を設定してください。スクリーンリーダーがモーダルの境界を認識する必要があります。バックドロップではなくメインコンテンツエリアにinertを使用してください。

よくある質問 Frequently Asked Questions

How to customize the modal animation? Modal Animationをカスタマイズするには？

Modify the CSS custom properties and class styles defined in the code section. Key adjustable values include colors, sizes, durations, and spacing. See the Adjustable Parameters section for specific variables.

コードセクションで定義されているCSSカスタムプロパティとクラススタイルを変更してください。色、サイズ、時間、間隔が主な調整可能値です。具体的な変数は調整可能パラメータセクションを参照してください。

How to use the modal animation in React? ReactでModal Animationを使うには？

Import the provided React component and its CSS file. The component accepts props for customization. Check the React code section for the full implementation and available props.

提供されているReactコンポーネントとCSSファイルをインポートしてください。コンポーネントのpropsでカスタマイズできます。完全な実装と利用可能なpropsはReactコードセクションを参照してください。

What are the performance implications of modal animation? Modal Animationのパフォーマンスへの影響は？

This implementation uses CSS transforms and opacity for animations, which are GPU-accelerated. It's lightweight and doesn't cause layout thrashing. Consider using prefers-reduced-motion for accessibility.

この実装はCSSのtransformとopacityを使用しており、GPUアクセラレーションされます。軽量でレイアウトスラッシングを引き起こしません。アクセシビリティのためにprefers-reduced-motionの使用を検討してください。

AIへの指示テンプレート AI Prompt Template

以下をAIに貼り付けると実装を依頼できます。 Paste the following into your AI assistant to request implementation.