【コピペOK】CSS モーダルアニメーション 9選（dialog 対応）

Q: React ではクラスの付け外しの代わりに何を使いますか？

zip の react/ フォルダのコンポーネントは、CSS のクラス名を付け外しする代わりに、開いているかどうかを表す state をひとつだけ持たせています。05のネイティブ dialog だけは 要素を参照して showModal() と close() を直接呼び分ける処理が入っています。

2026-09-09 · Godrich · 9種 · 8分で読める

css モーダルは、ボタンを押した瞬間に画面の上に浮かぶ確認・選択用の小さなパネルのことで、CSS だけで開閉のアニメーションまで作れます。この記事では9種類を選び、下のグリッドは2秒ごとに自動で開閉するので、クリックはできず眺めるだけになりますが、気に入ったものは zip

07 fullscreen-takeover

08 modal-shake-outside

09 stacked-modals

自動再生 · タイルを押すとその項目へ · すべて1つのzip

01 フェード＋拡大
02 ボトムシート
03 サイドドロワー
04 背景ぼかし
05 ネイティブ dialog
06 ポップオーバー確認
07 ボタンから全画面
08 外側クリックで揺れる
09 重なるモーダル

並び順は効果の強さではなく、実装の土台がどこにあるかを基準にしています。最初の4つ（01〜04）は css モーダル中央寄せの定番である position: fixed の型をベースに、動く方向と背景の処理だけを変えた配置違いです。次の2つ（05・06）はブラウザ標準の <dialog> と popover 属性を使い、開閉のためだけに JavaScript を数行呼び出せば済みます。最後の3つ（07〜09）は状態が絡む応用形で、ボタン自体が広がったり、閉じられないモーダルが揺れたり、モーダルが重なったりします。9つとも完成した CSS ファイルと React 版は zip に入っています。 07 のように画面を丸ごと覆う切り替えがページ単位まで大きくなる場合はcss ページ遷移アニメーション9選がその規模だけを集めた記事で、開閉ではなくスクロールがきっかけになる登場はスクロールアニメーション CSS のみ 9選にあります。

01フェード＋拡大

どんな動きか

確認や通知のような基本のモーダルは、画面の中央で少し拡大しながら現れます。

<main class="stage is-demo">
  <button class="trigger" type="button">支払う</button>
  <div class="overlay"></div>
  <div class="modal" role="dialog" aria-modal="true" aria-labelledby="t1">
    <h2 id="t1">決済を確定しますか？</h2>
    <p>カード承認後はキャンセルできません。</p>
    <button class="modal__close" type="button">確認</button>
  </div>
</main>

@use "../../../../site/static/demo-tokens" as *;

// ── 변수 3개. 변형은 이것만 바꾼다 ──────────────────────────
$duration: $dur-quick;     // 열리는 시간 (실제 클릭)
$easing: $ease-spring;     // 처음 빠르고 끝은 부드럽게
$color: $subject-blue;     // 강조색(버튼·포커스)

@include stage($stage-ink);

.stage { position: relative; }

.trigger {
  border: 0; border-radius: $r-pill;
  padding: clamp(10px, 3.4vmin, 14px) clamp(20px, 7vmin, 30px);
  font-weight: 600;
  font-size: clamp(13px, 4vmin, 16px);
  line-height: 1;
  font-family: inherit;
  color: $stage-ink; background: $subject-cream;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: filter $dur-instant;
  &:hover, &:focus-visible { filter: brightness(.94); }
}

.overlay {
  position: fixed; inset: 0;
  background: rgba($stage-ink, .55);
  opacity: 0; pointer-events: none;
  transition: opacity $duration $easing;
}

.modal {
  position: fixed; left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(.92);
  opacity: 0; pointer-events: none;
  width: min(78vw, 300px);
  padding: clamp(12px, 4.5vmin, 22px);
  border-radius: $r-card; background: $stage-paper; color: $stage-ink;
  box-shadow: $shadow-raised;
  transition: opacity $duration $easing, transform $duration $easing;

  h2 { margin: 0 0 6px; font-size: clamp(13px, 4.4vmin, 18px); }
  p  { margin: 0 0 14px; font-size: clamp(10px, 3.2vmin, 13px); color: rgba($stage-ink, .65); }
}

.modal__close {
  border: 0; border-radius: $r-control; background: $color; color: $stage-paper;
  padding: clamp(7px, 2.6vmin, 9px) clamp(14px, 4.6vmin, 18px);
  font-weight: 600;
  font-size: clamp(11px, 3.4vmin, 13px);
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
}

// 실제 조작 상태
.stage.is-open .overlay { opacity: 1; pointer-events: auto; }
.stage.is-open .modal   { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }

// 데모: 2초 안에 열림→닫힘 반복 (실측 2026-09-09 편 001 관례: 루프 전용 keyframes 는 $dur-loop 로 고정)
.stage.is-demo .overlay { animation: overlay-loop $dur-loop ease-in-out infinite; }
.stage.is-demo .modal   { animation: modal-loop $dur-loop $easing infinite; }

@keyframes overlay-loop {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  70%  { opacity: 1; }
  85%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes modal-loop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.92); }
  15%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  70%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  85%  { opacity: 0; transform: translate(-50%, -50%) scale(.92); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(.92); }
}

@media (prefers-reduced-motion: reduce) {
  .stage.is-demo .overlay, .stage.is-demo .modal { animation: none; }
  .overlay, .modal { transition-duration: 1ms; }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #17141a;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.stage {
  position: relative;
}

.trigger {
  border: 0;
  border-radius: 999px;
  padding: clamp(10px, 3.4vmin, 14px) clamp(20px, 7vmin, 30px);
  font-weight: 600;
  font-size: clamp(13px, 4vmin, 16px);
  line-height: 1;
  font-family: inherit;
  color: #17141a;
  background: #fff7e6;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: filter 140ms;
}
.trigger:hover, .trigger:focus-visible {
  filter: brightness(0.94);
}

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(23, 20, 26, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.92);
  opacity: 0;
  pointer-events: none;
  width: min(78vw, 300px);
  padding: clamp(12px, 4.5vmin, 22px);
  border-radius: 16px;
  background: #ffffff;
  color: #17141a;
  box-shadow: 0 14px 24px rgba(23, 20, 26, 0.32);
  transition: opacity 220ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.modal h2 {
  margin: 0 0 6px;
  font-size: clamp(13px, 4.4vmin, 18px);
}
.modal p {
  margin: 0 0 14px;
  font-size: clamp(10px, 3.2vmin, 13px);
  color: rgba(23, 20, 26, 0.65);
}

.modal__close {
  border: 0;
  border-radius: 12px;
  background: #2f6df6;
  color: #ffffff;
  padding: clamp(7px, 2.6vmin, 9px) clamp(14px, 4.6vmin, 18px);
  font-weight: 600;
  font-size: clamp(11px, 3.4vmin, 13px);
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
}

.stage.is-open .overlay {
  opacity: 1;
  pointer-events: auto;
}

.stage.is-open .modal {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}

.stage.is-demo .overlay {
  animation: overlay-loop 2s ease-in-out infinite;
}

.stage.is-demo .modal {
  animation: modal-loop 2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

@keyframes overlay-loop {
  0% {
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  85% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes modal-loop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.92);
  }
  15% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  70% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  85% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.92);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.92);
  }
}
@media (prefers-reduced-motion: reduce) {
  .stage.is-demo .overlay, .stage.is-demo .modal {
    animation: none;
  }
  .overlay, .modal {
    transition-duration: 1ms;
  }
}

// 실제 클릭: 트리거로 열고 오버레이·確認·ESC 로 닫는다. 데모(.is-demo)는 자동 반복하다가 실제 조작이 오면 멈춘다.
(function () {
  var stage = document.querySelector('.stage');
  var trigger = document.querySelector('.trigger');
  var overlay = document.querySelector('.overlay');
  var close = document.querySelector('.modal__close');
  function open() { stage.classList.remove('is-demo'); stage.classList.add('is-open'); }
  function shut() { stage.classList.remove('is-open'); }
  trigger.addEventListener('click', open);
  overlay.addEventListener('click', shut);
  close.addEventListener('click', shut);
  document.addEventListener('keydown', function (e) { if (e.key === 'Escape') shut(); });
})();

import { useState } from "react";
import type { CSSProperties } from "react";
import styles from "./ModalFadeScale.module.scss";

export type ModalFadeScaleProps = {
  triggerLabel: string;
  title: string;
  description: string;
  confirmLabel: string;
  /** 열리는 시간 (기본 220ms) */
  duration?: number;
  /** CSS easing */
  easing?: string;
  /** 강조색 */
  color?: string;
};

type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };

export default function ModalFadeScale({
  triggerLabel,
  title,
  description,
  confirmLabel,
  duration = 220,
  easing = "cubic-bezier(.2,.8,.2,1)",
  color = "#2f6df6",
}: ModalFadeScaleProps) {
  const [open, setOpen] = useState(false);
  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };

  return (
    <div className={styles.stage} style={vars}>
      <button type="button" className={styles.trigger} onClick={() => setOpen(true)}>
        {triggerLabel}
      </button>
      <div
        className={open ? `${styles.overlay} ${styles.isOpen}` : styles.overlay}
        onClick={() => setOpen(false)}
      />
      <div
        className={open ? `${styles.modal} ${styles.isOpen}` : styles.modal}
        role="dialog"
        aria-modal="true"
      >
        <h2>{title}</h2>
        <p>{description}</p>
        <button type="button" className={styles.confirm} onClick={() => setOpen(false)}>
          {confirmLabel}
        </button>
      </div>
    </div>
  );
}

新しいタブで開く

01 · フェード＋拡大 — 計測累積面積 24.692% · 動いたフレーム 7/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

200ms0.9→1페이드만

モーダルアニメーション css の使いどころ

閉じるときは同じ transform を逆再生するだけで、開く用と閉じる用にキーフレームを2つ書く必要はありません。

.modal {
  position: fixed; left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(.92);
  opacity: 0; pointer-events: none;
  transition: opacity 220ms $ease-spring,
              transform 220ms $ease-spring;
}

.stage.is-open .overlay { opacity: 1; pointer-events: auto; }
.stage.is-open .modal {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}

02ボトムシート

何が起きるか

配送方法などの選択肢は、画面下からシートがそのまま持ち上がって現れます。

<main class="stage is-demo">
  <button class="trigger" type="button">オプションを見る</button>
  <div class="overlay"></div>
  <div class="sheet" role="dialog" aria-modal="true" aria-labelledby="t2">
    <div class="sheet__handle"></div>
    <h2 id="t2">配送オプション</h2>
    <p>当日・翌日・通常配送から選んでください。</p>
    <button class="sheet__close" type="button">閉じる</button>
  </div>
</main>

@use "../../../../site/static/demo-tokens" as *;

// ── 변수 3개 ──────────────────────────────────────────
$duration: $dur-base;      // 시트가 올라오는 시간
$easing: $ease-out;        // 관성 없이 딱 멈춘다
$color: $subject-ink;      // 강조색(손잡이·버튼)

@include stage($stage-yellow);

.stage { position: relative; }

.trigger {
  border: 0; border-radius: $r-pill;
  padding: clamp(10px, 3.4vmin, 14px) clamp(20px, 7vmin, 30px);
  font-weight: 600;
  font-size: clamp(13px, 4vmin, 16px);
  line-height: 1;
  font-family: inherit;
  color: $stage-paper; background: $subject-ink;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}

.overlay {
  position: fixed; inset: 0;
  background: rgba($stage-ink, .5);
  opacity: 0; pointer-events: none;
  transition: opacity $duration $easing;
}

.sheet {
  position: fixed; left: 50%; bottom: 0; top: auto;
  transform: translate(-50%, 100%);
  width: min(94vw, 320px);
  max-height: 62%;
  box-sizing: border-box;
  padding: clamp(10px, 4vmin, 18px) clamp(14px, 5vmin, 22px);
  border-radius: $r-card $r-card 0 0;
  background: $stage-paper; color: $stage-ink;
  box-shadow: $shadow-raised;
  pointer-events: none;
  transition: transform $duration $easing;

  h2 { margin: 8px 0 4px; font-size: clamp(13px, 4.2vmin, 17px); }
  p  { margin: 0 0 10px; font-size: clamp(10px, 3.2vmin, 13px); color: rgba($stage-ink, .65); }
}

.sheet__handle {
  width: 36px; height: 4px; margin: 0 auto;
  border-radius: $r-pill; background: rgba($stage-ink, .25);
}

.sheet__close {
  border: 0; border-radius: $r-control; background: $color; color: $stage-paper;
  padding: clamp(7px, 2.6vmin, 9px) clamp(14px, 4.6vmin, 18px);
  font-weight: 600;
  font-size: clamp(11px, 3.4vmin, 13px);
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
}

.stage.is-open .overlay { opacity: 1; pointer-events: auto; }
.stage.is-open .sheet   { transform: translate(-50%, 0); pointer-events: auto; }

.stage.is-demo .overlay { animation: overlay-loop $dur-loop ease-in-out infinite; }
.stage.is-demo .sheet   { animation: sheet-loop $dur-loop $easing infinite; }

@keyframes overlay-loop {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  70%  { opacity: 1; }
  85%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes sheet-loop {
  0%   { transform: translate(-50%, 100%); }
  15%  { transform: translate(-50%, 0); }
  70%  { transform: translate(-50%, 0); }
  85%  { transform: translate(-50%, 100%); }
  100% { transform: translate(-50%, 100%); }
}

@media (prefers-reduced-motion: reduce) {
  .stage.is-demo .overlay, .stage.is-demo .sheet { animation: none; }
  .overlay, .sheet { transition-duration: 1ms; }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #ffd23f;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.stage {
  position: relative;
}

.trigger {
  border: 0;
  border-radius: 999px;
  padding: clamp(10px, 3.4vmin, 14px) clamp(20px, 7vmin, 30px);
  font-weight: 600;
  font-size: clamp(13px, 4vmin, 16px);
  line-height: 1;
  font-family: inherit;
  color: #ffffff;
  background: #17141a;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(23, 20, 26, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease-out;
}

.sheet {
  position: fixed;
  left: 50%;
  bottom: 0;
  top: auto;
  transform: translate(-50%, 100%);
  width: min(94vw, 320px);
  max-height: 62%;
  box-sizing: border-box;
  padding: clamp(10px, 4vmin, 18px) clamp(14px, 5vmin, 22px);
  border-radius: 16px 16px 0 0;
  background: #ffffff;
  color: #17141a;
  box-shadow: 0 14px 24px rgba(23, 20, 26, 0.32);
  pointer-events: none;
  transition: transform 300ms ease-out;
}
.sheet h2 {
  margin: 8px 0 4px;
  font-size: clamp(13px, 4.2vmin, 17px);
}
.sheet p {
  margin: 0 0 10px;
  font-size: clamp(10px, 3.2vmin, 13px);
  color: rgba(23, 20, 26, 0.65);
}

.sheet__handle {
  width: 36px;
  height: 4px;
  margin: 0 auto;
  border-radius: 999px;
  background: rgba(23, 20, 26, 0.25);
}

.sheet__close {
  border: 0;
  border-radius: 12px;
  background: #17141a;
  color: #ffffff;
  padding: clamp(7px, 2.6vmin, 9px) clamp(14px, 4.6vmin, 18px);
  font-weight: 600;
  font-size: clamp(11px, 3.4vmin, 13px);
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
}

.stage.is-open .overlay {
  opacity: 1;
  pointer-events: auto;
}

.stage.is-open .sheet {
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.stage.is-demo .overlay {
  animation: overlay-loop 2s ease-in-out infinite;
}

.stage.is-demo .sheet {
  animation: sheet-loop 2s ease-out infinite;
}

@keyframes overlay-loop {
  0% {
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  85% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes sheet-loop {
  0% {
    transform: translate(-50%, 100%);
  }
  15% {
    transform: translate(-50%, 0);
  }
  70% {
    transform: translate(-50%, 0);
  }
  85% {
    transform: translate(-50%, 100%);
  }
  100% {
    transform: translate(-50%, 100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .stage.is-demo .overlay, .stage.is-demo .sheet {
    animation: none;
  }
  .overlay, .sheet {
    transition-duration: 1ms;
  }
}

(function () {
  var stage = document.querySelector('.stage');
  var trigger = document.querySelector('.trigger');
  var overlay = document.querySelector('.overlay');
  var close = document.querySelector('.sheet__close');
  function open() { stage.classList.remove('is-demo'); stage.classList.add('is-open'); }
  function shut() { stage.classList.remove('is-open'); }
  trigger.addEventListener('click', open);
  overlay.addEventListener('click', shut);
  close.addEventListener('click', shut);
  document.addEventListener('keydown', function (e) { if (e.key === 'Escape') shut(); });
})();

import { useState } from "react";
import type { CSSProperties } from "react";
import styles from "./BottomSheet.module.scss";

export type BottomSheetProps = {
  triggerLabel: string;
  title: string;
  description: string;
  closeLabel: string;
  /** 시트가 올라오는 시간 (기본 300ms) */
  duration?: number;
  easing?: string;
  color?: string;
};

type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };

export default function BottomSheet({
  triggerLabel,
  title,
  description,
  closeLabel,
  duration = 300,
  easing = "ease-out",
  color = "#17141a",
}: BottomSheetProps) {
  const [open, setOpen] = useState(false);
  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };

  return (
    <div className={styles.stage} style={vars}>
      <button type="button" className={styles.trigger} onClick={() => setOpen(true)}>
        {triggerLabel}
      </button>
      <div
        className={open ? `${styles.overlay} ${styles.isOpen}` : styles.overlay}
        onClick={() => setOpen(false)}
      />
      <div
        className={open ? `${styles.sheet} ${styles.isOpen}` : styles.sheet}
        role="dialog"
        aria-modal="true"
      >
        <div className={styles.handle} />
        <h2>{title}</h2>
        <p>{description}</p>
        <button type="button" className={styles.close} onClick={() => setOpen(false)}>
          {closeLabel}
        </button>
      </div>
    </div>
  );
}

新しいタブで開く

02 · ボトムシート — 計測累積面積 98.256% · 動いたフレーム 9/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

280ms반만 열기손잡이

向いている場面

position: fixed と bottom: 0 を組み合わせ、transform だけを動かすので、開閉のたびに高さを計算し直す必要がありません。

.sheet {
  position: fixed; left: 50%; bottom: 0; top: auto;
  transform: translate(-50%, 100%);
  transition: transform 300ms $ease-out;
}

.stage.is-open .sheet {
  transform: translate(-50%, 0);
  pointer-events: auto;
}

03サイドドロワー

動きの内容

カートや設定画面は、右端からパネルが押し出されるように現れます。

<main class="stage is-demo">
  <button class="trigger" type="button">カート</button>
  <div class="overlay"></div>
  <div class="drawer" role="dialog" aria-modal="true" aria-labelledby="t3">
    <h2 id="t3">カート（2）</h2>
    <p>合計 48,000円。送料は次の画面で。</p>
    <button class="drawer__close" type="button">閉じる</button>
  </div>
</main>

@use "../../../../site/static/demo-tokens" as *;

// ── 변수 3개 ──────────────────────────────────────────
$duration: $dur-enter;     // 패널이 밀려 들어오는 시간
$easing: $ease-spring;     // 끝에서 살짝 튕긴다
$color: $subject-cream;    // 강조색(버튼)

@include stage($stage-orange);

.stage { position: relative; }

.trigger {
  border: 0; border-radius: $r-pill;
  padding: clamp(10px, 3.4vmin, 14px) clamp(20px, 7vmin, 30px);
  font-weight: 600;
  font-size: clamp(13px, 4vmin, 16px);
  line-height: 1;
  font-family: inherit;
  color: $stage-orange; background: $subject-cream;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}

.overlay {
  position: fixed; inset: 0;
  background: rgba($stage-ink, .5);
  opacity: 0; pointer-events: none;
  transition: opacity $duration $easing;
}

.drawer {
  position: fixed; right: 0; top: 0; bottom: 0; left: auto;
  transform: translateX(100%);
  width: min(78vw, 260px);
  box-sizing: border-box;
  padding: clamp(14px, 5vmin, 24px);
  background: $stage-paper; color: $stage-ink;
  box-shadow: $shadow-raised;
  pointer-events: none;
  transition: transform $duration $easing;

  h2 { margin: 0 0 6px; font-size: clamp(13px, 4.2vmin, 17px); }
  p  { margin: 0 0 14px; font-size: clamp(10px, 3.2vmin, 13px); color: rgba($stage-ink, .65); }
}

.drawer__close {
  border: 0; border-radius: $r-control; background: $stage-orange; color: $color;
  padding: clamp(7px, 2.6vmin, 9px) clamp(14px, 4.6vmin, 18px);
  font-weight: 600;
  font-size: clamp(11px, 3.4vmin, 13px);
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
}

.stage.is-open .overlay { opacity: 1; pointer-events: auto; }
.stage.is-open .drawer  { transform: translateX(0); pointer-events: auto; }

.stage.is-demo .overlay { animation: overlay-loop $dur-loop ease-in-out infinite; }
.stage.is-demo .drawer  { animation: drawer-loop $dur-loop $easing infinite; }

@keyframes overlay-loop {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  70%  { opacity: 1; }
  85%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes drawer-loop {
  0%   { transform: translateX(100%); }
  15%  { transform: translateX(0); }
  70%  { transform: translateX(0); }
  85%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .stage.is-demo .overlay, .stage.is-demo .drawer { animation: none; }
  .overlay, .drawer { transition-duration: 1ms; }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #ff4d1f;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.stage {
  position: relative;
}

.trigger {
  border: 0;
  border-radius: 999px;
  padding: clamp(10px, 3.4vmin, 14px) clamp(20px, 7vmin, 30px);
  font-weight: 600;
  font-size: clamp(13px, 4vmin, 16px);
  line-height: 1;
  font-family: inherit;
  color: #ff4d1f;
  background: #fff7e6;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(23, 20, 26, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.drawer {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  left: auto;
  transform: translateX(100%);
  width: min(78vw, 260px);
  box-sizing: border-box;
  padding: clamp(14px, 5vmin, 24px);
  background: #ffffff;
  color: #17141a;
  box-shadow: 0 14px 24px rgba(23, 20, 26, 0.32);
  pointer-events: none;
  transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.drawer h2 {
  margin: 0 0 6px;
  font-size: clamp(13px, 4.2vmin, 17px);
}
.drawer p {
  margin: 0 0 14px;
  font-size: clamp(10px, 3.2vmin, 13px);
  color: rgba(23, 20, 26, 0.65);
}

.drawer__close {
  border: 0;
  border-radius: 12px;
  background: #ff4d1f;
  color: #fff7e6;
  padding: clamp(7px, 2.6vmin, 9px) clamp(14px, 4.6vmin, 18px);
  font-weight: 600;
  font-size: clamp(11px, 3.4vmin, 13px);
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
}

.stage.is-open .overlay {
  opacity: 1;
  pointer-events: auto;
}

.stage.is-open .drawer {
  transform: translateX(0);
  pointer-events: auto;
}

.stage.is-demo .overlay {
  animation: overlay-loop 2s ease-in-out infinite;
}

.stage.is-demo .drawer {
  animation: drawer-loop 2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

@keyframes overlay-loop {
  0% {
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  85% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes drawer-loop {
  0% {
    transform: translateX(100%);
  }
  15% {
    transform: translateX(0);
  }
  70% {
    transform: translateX(0);
  }
  85% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .stage.is-demo .overlay, .stage.is-demo .drawer {
    animation: none;
  }
  .overlay, .drawer {
    transition-duration: 1ms;
  }
}

(function () {
  var stage = document.querySelector('.stage');
  var trigger = document.querySelector('.trigger');
  var overlay = document.querySelector('.overlay');
  var close = document.querySelector('.drawer__close');
  function open() { stage.classList.remove('is-demo'); stage.classList.add('is-open'); }
  function shut() { stage.classList.remove('is-open'); }
  trigger.addEventListener('click', open);
  overlay.addEventListener('click', shut);
  close.addEventListener('click', shut);
  document.addEventListener('keydown', function (e) { if (e.key === 'Escape') shut(); });
})();

import { useState } from "react";
import type { CSSProperties } from "react";
import styles from "./SideDrawer.module.scss";

export type SideDrawerProps = {
  triggerLabel: string;
  title: string;
  description: string;
  closeLabel: string;
  /** 패널이 밀려 들어오는 시간 (기본 600ms) */
  duration?: number;
  easing?: string;
  color?: string;
};

type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };

export default function SideDrawer({
  triggerLabel,
  title,
  description,
  closeLabel,
  duration = 600,
  easing = "cubic-bezier(.2,.8,.2,1)",
  color = "#fff7e6",
}: SideDrawerProps) {
  const [open, setOpen] = useState(false);
  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };

  return (
    <div className={styles.stage} style={vars}>
      <button type="button" className={styles.trigger} onClick={() => setOpen(true)}>
        {triggerLabel}
      </button>
      <div
        className={open ? `${styles.overlay} ${styles.isOpen}` : styles.overlay}
        onClick={() => setOpen(false)}
      />
      <div
        className={open ? `${styles.drawer} ${styles.isOpen}` : styles.drawer}
        role="dialog"
        aria-modal="true"
      >
        <h2>{title}</h2>
        <p>{description}</p>
        <button type="button" className={styles.close} onClick={() => setOpen(false)}>
          {closeLabel}
        </button>
      </div>
    </div>
  );
}

新しいタブで開く

03 · サイドドロワー — 計測累積面積 100.0% · 動いたフレーム 9/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

320px왼쪽에서전체 폭

使う場面

overlay の不透明度とパネルの位置を同じ長さで動かすので、背景が暗くなる速さとパネルが到着する速さがそろいます。

.drawer {
  position: fixed; right: 0; top: 0; bottom: 0; left: auto;
  transform: translateX(100%);
  width: min(78vw, 260px);
  transition: transform 600ms $ease-spring;
}

.stage.is-open .drawer {
  transform: translateX(0);
  pointer-events: auto;
}

04背景ぼかし

どんな動きか

決済確認のように失敗が許されない場面では、背景がぼやけていくことで視線をモーダルへ集めます。

<main class="stage is-demo">
  <div class="page">
    <div class="page__line page__line--a"></div>
    <div class="page__line page__line--b"></div>
    <div class="page__line page__line--c"></div>
    <button class="trigger" type="button">支払いを確認</button>
  </div>
  <div class="overlay"></div>
  <div class="modal" role="dialog" aria-modal="true" aria-labelledby="t4">
    <h2 id="t4">67,000円を決済しますか？</h2>
    <p>背景がぼやける間に、内容をよく確認してください。</p>
    <button class="modal__close" type="button">支払う</button>
  </div>
</main>

@use "../../../../site/static/demo-tokens" as *;

// ── 변수 3개 ──────────────────────────────────────────
$duration: $dur-enter;     // 배경이 흐려지는 시간
$easing: $ease-out;
$color: $subject-blue;     // 강조색(버튼)

@include stage($stage-paper);

.stage { position: relative; }

// 뒤 화면 흉내 — 단색 배경만으로는 blur 가 보이지 않아 가짜 콘텐츠를 둔다
.page {
  position: absolute; inset: 0; display: grid; place-items: center; gap: clamp(8px, 3vmin, 14px);
}
.page__line {
  height: clamp(8px, 3vmin, 12px); border-radius: $r-control; background: rgba($stage-ink, .12);
  &--a { width: 55%; } &--b { width: 40%; } &--c { width: 62%; }
}

.trigger {
  border: 0; border-radius: $r-pill; margin-top: clamp(8px, 3vmin, 14px);
  padding: clamp(10px, 3.4vmin, 14px) clamp(20px, 7vmin, 30px);
  font-weight: 600;
  font-size: clamp(13px, 4vmin, 16px);
  line-height: 1;
  font-family: inherit;
  color: $stage-paper; background: $color;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}

.overlay {
  position: fixed; inset: 0;
  background: rgba($stage-ink, .28);
  backdrop-filter: blur(0px);
  opacity: 0; pointer-events: none;
  transition: opacity $duration $easing, backdrop-filter $duration $easing;
}

.modal {
  position: fixed; left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(.94);
  opacity: 0; pointer-events: none;
  width: min(78vw, 300px);
  padding: clamp(12px, 4.5vmin, 22px);
  border-radius: $r-card; background: $stage-paper; color: $stage-ink;
  box-shadow: $shadow-raised;
  transition: opacity $duration $easing, transform $duration $easing;

  h2 { margin: 0 0 6px; font-size: clamp(13px, 4.4vmin, 18px); }
  p  { margin: 0 0 14px; font-size: clamp(10px, 3.2vmin, 13px); color: rgba($stage-ink, .65); }
}

.modal__close {
  border: 0; border-radius: $r-control; background: $color; color: $stage-paper;
  padding: clamp(7px, 2.6vmin, 9px) clamp(14px, 4.6vmin, 18px);
  font-weight: 600;
  font-size: clamp(11px, 3.4vmin, 13px);
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
}

.stage.is-open .overlay { opacity: 1; backdrop-filter: blur(8px); pointer-events: auto; }
.stage.is-open .modal   { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }

.stage.is-demo .overlay { animation: overlay-loop $dur-loop ease-in-out infinite; }
.stage.is-demo .modal   { animation: modal-loop $dur-loop $easing infinite; }

@keyframes overlay-loop {
  0%   { opacity: 0; backdrop-filter: blur(0px); }
  15%  { opacity: 1; backdrop-filter: blur(8px); }
  70%  { opacity: 1; backdrop-filter: blur(8px); }
  85%  { opacity: 0; backdrop-filter: blur(0px); }
  100% { opacity: 0; backdrop-filter: blur(0px); }
}
@keyframes modal-loop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.94); }
  15%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  70%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  85%  { opacity: 0; transform: translate(-50%, -50%) scale(.94); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(.94); }
}

@media (prefers-reduced-motion: reduce) {
  .stage.is-demo .overlay, .stage.is-demo .modal { animation: none; }
  .overlay, .modal { transition-duration: 1ms; }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #ffffff;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.stage {
  position: relative;
}

.page {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: clamp(8px, 3vmin, 14px);
}

.page__line {
  height: clamp(8px, 3vmin, 12px);
  border-radius: 12px;
  background: rgba(23, 20, 26, 0.12);
}
.page__line--a {
  width: 55%;
}
.page__line--b {
  width: 40%;
}
.page__line--c {
  width: 62%;
}

.trigger {
  border: 0;
  border-radius: 999px;
  margin-top: clamp(8px, 3vmin, 14px);
  padding: clamp(10px, 3.4vmin, 14px) clamp(20px, 7vmin, 30px);
  font-weight: 600;
  font-size: clamp(13px, 4vmin, 16px);
  line-height: 1;
  font-family: inherit;
  color: #ffffff;
  background: #2f6df6;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(23, 20, 26, 0.28);
  backdrop-filter: blur(0px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 600ms ease-out, backdrop-filter 600ms ease-out;
}

.modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.94);
  opacity: 0;
  pointer-events: none;
  width: min(78vw, 300px);
  padding: clamp(12px, 4.5vmin, 22px);
  border-radius: 16px;
  background: #ffffff;
  color: #17141a;
  box-shadow: 0 14px 24px rgba(23, 20, 26, 0.32);
  transition: opacity 600ms ease-out, transform 600ms ease-out;
}
.modal h2 {
  margin: 0 0 6px;
  font-size: clamp(13px, 4.4vmin, 18px);
}
.modal p {
  margin: 0 0 14px;
  font-size: clamp(10px, 3.2vmin, 13px);
  color: rgba(23, 20, 26, 0.65);
}

.modal__close {
  border: 0;
  border-radius: 12px;
  background: #2f6df6;
  color: #ffffff;
  padding: clamp(7px, 2.6vmin, 9px) clamp(14px, 4.6vmin, 18px);
  font-weight: 600;
  font-size: clamp(11px, 3.4vmin, 13px);
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
}

.stage.is-open .overlay {
  opacity: 1;
  backdrop-filter: blur(8px);
  pointer-events: auto;
}

.stage.is-open .modal {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}

.stage.is-demo .overlay {
  animation: overlay-loop 2s ease-in-out infinite;
}

.stage.is-demo .modal {
  animation: modal-loop 2s ease-out infinite;
}

@keyframes overlay-loop {
  0% {
    opacity: 0;
    backdrop-filter: blur(0px);
  }
  15% {
    opacity: 1;
    backdrop-filter: blur(8px);
  }
  70% {
    opacity: 1;
    backdrop-filter: blur(8px);
  }
  85% {
    opacity: 0;
    backdrop-filter: blur(0px);
  }
  100% {
    opacity: 0;
    backdrop-filter: blur(0px);
  }
}
@keyframes modal-loop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.94);
  }
  15% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  70% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  85% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.94);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.94);
  }
}
@media (prefers-reduced-motion: reduce) {
  .stage.is-demo .overlay, .stage.is-demo .modal {
    animation: none;
  }
  .overlay, .modal {
    transition-duration: 1ms;
  }
}

(function () {
  var stage = document.querySelector('.stage');
  var trigger = document.querySelector('.trigger');
  var overlay = document.querySelector('.overlay');
  var close = document.querySelector('.modal__close');
  function open() { stage.classList.remove('is-demo'); stage.classList.add('is-open'); }
  function shut() { stage.classList.remove('is-open'); }
  trigger.addEventListener('click', open);
  overlay.addEventListener('click', shut);
  close.addEventListener('click', shut);
  document.addEventListener('keydown', function (e) { if (e.key === 'Escape') shut(); });
})();

import { useState } from "react";
import type { CSSProperties } from "react";
import styles from "./BackdropBlurModal.module.scss";

export type BackdropBlurModalProps = {
  triggerLabel: string;
  title: string;
  description: string;
  confirmLabel: string;
  /** 배경이 흐려지는 시간 (기본 600ms) */
  duration?: number;
  easing?: string;
  color?: string;
};

type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };

export default function BackdropBlurModal({
  triggerLabel,
  title,
  description,
  confirmLabel,
  duration = 600,
  easing = "ease-out",
  color = "#2f6df6",
}: BackdropBlurModalProps) {
  const [open, setOpen] = useState(false);
  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };

  return (
    <div className={styles.stage} style={vars}>
      <div className={styles.page}>
        <div className={`${styles.line} ${styles.lineA}`} />
        <div className={`${styles.line} ${styles.lineB}`} />
        <button type="button" className={styles.trigger} onClick={() => setOpen(true)}>
          {triggerLabel}
        </button>
      </div>
      <div
        className={open ? `${styles.overlay} ${styles.isOpen}` : styles.overlay}
        onClick={() => setOpen(false)}
      />
      <div
        className={open ? `${styles.modal} ${styles.isOpen}` : styles.modal}
        role="dialog"
        aria-modal="true"
      >
        <h2>{title}</h2>
        <p>{description}</p>
        <button type="button" className={styles.confirm} onClick={() => setOpen(false)}>
          {confirmLabel}
        </button>
      </div>
    </div>
  );
}

新しいタブで開く

04 · 背景ぼかし — 計測累積面積 100.0% · 動いたフレーム 8/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

8px어둡게만12px

使いどころ

opacity だけでなく backdrop-filter の blur 値もあわせて動かすのが要点です。

.overlay {
  position: fixed; inset: 0;
  background: rgba($stage-ink, .28);
  backdrop-filter: blur(0px);
  opacity: 0; pointer-events: none;
  transition: opacity 600ms $ease-out,
              backdrop-filter 600ms $ease-out;
}

.stage.is-open .overlay {
  opacity: 1;
  backdrop-filter: blur(8px);
  pointer-events: auto;
}

05ネイティブ dialog

何が起きるか

<dialog> をそのまま @starting-style で開けば、フォーカストラップと ESC を自前で書かずに、CSS だけで開閉のアニメーションが付きます。

<main class="stage">
  <button class="trigger" type="button">もう一度開く</button>
  <div class="overlay is-demo"></div>
  <dialog class="modal is-demo" open aria-labelledby="t5">
    <h2 id="t5">変更を保存しますか？</h2>
    <p>dialog は開閉時に自動でフォーカスを閉じ込めます。</p>
    <button class="modal__close" type="button">閉じる</button>
  </dialog>
</main>

@use "../../../../site/static/demo-tokens" as *;

// ── 변수 3개 ──────────────────────────────────────────
$duration: $dur-base;      // 대화상자가 뜨는 시간
$easing: $ease-out;
$color: $subject-cream;    // 강조색(버튼)

@include stage($stage-ink);

.stage { position: relative; }

.trigger {
  border: 0; border-radius: $r-pill;
  padding: clamp(10px, 3.4vmin, 14px) clamp(20px, 7vmin, 30px);
  font-weight: 600;
  font-size: clamp(13px, 4vmin, 16px);
  line-height: 1;
  font-family: inherit;
  color: $stage-ink; background: $color;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}

.overlay {
  position: fixed; inset: 0;
  background: rgba($stage-ink, .55);
  opacity: 0; pointer-events: none;
}

// 진짜 showModal() 로 열렸을 때만 브라우저가 만드는 배경 — 우리 overlay 와 겹치지 않게 투명하게 둔다
dialog.modal::backdrop { background: transparent; }

dialog.modal {
  border: 0; margin: auto;
  position: fixed; inset: 0;
  width: min(78vw, 300px); height: fit-content;
  padding: clamp(12px, 4.5vmin, 22px);
  border-radius: $r-card; background: $stage-paper; color: $stage-ink;
  box-shadow: $shadow-raised;
  opacity: 0; transform: scale(.92) translateY(10px);

  h2 { margin: 0 0 6px; font-size: clamp(13px, 4.4vmin, 18px); }
  p  { margin: 0 0 14px; font-size: clamp(10px, 3.2vmin, 13px); color: rgba($stage-ink, .65); }

  // 실제 open 전환: display·overlay 가 discrete 라 @starting-style 없이는 즉시 나타난다
  transition: opacity $duration $easing, transform $duration $easing,
              overlay $duration allow-discrete, display $duration allow-discrete;
  &[open] { opacity: 1; transform: none; }
  @starting-style { &[open] { opacity: 0; transform: scale(.92) translateY(10px); } }
}

.modal__close {
  border: 0; border-radius: $r-control; background: $subject-blue; color: $stage-paper;
  padding: clamp(7px, 2.6vmin, 9px) clamp(14px, 4.6vmin, 18px);
  font-weight: 600;
  font-size: clamp(11px, 3.4vmin, 13px);
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
}

// 데모: open 속성은 그대로 두고 keyframes 로만 접었다 편다
.overlay.is-demo { animation: overlay-loop $dur-loop ease-in-out infinite; }
dialog.modal.is-demo { animation: dialog-loop $dur-loop $easing infinite; }

@keyframes overlay-loop {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  70%  { opacity: 1; }
  85%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes dialog-loop {
  0%   { opacity: 0; transform: scale(.92) translateY(10px); }
  15%  { opacity: 1; transform: scale(1) translateY(0); }
  70%  { opacity: 1; transform: scale(1) translateY(0); }
  85%  { opacity: 0; transform: scale(.92) translateY(10px); }
  100% { opacity: 0; transform: scale(.92) translateY(10px); }
}

@media (prefers-reduced-motion: reduce) {
  .overlay.is-demo, dialog.modal.is-demo { animation: none; }
  dialog.modal { transition-duration: 1ms; }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #17141a;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.stage {
  position: relative;
}

.trigger {
  border: 0;
  border-radius: 999px;
  padding: clamp(10px, 3.4vmin, 14px) clamp(20px, 7vmin, 30px);
  font-weight: 600;
  font-size: clamp(13px, 4vmin, 16px);
  line-height: 1;
  font-family: inherit;
  color: #17141a;
  background: #fff7e6;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(23, 20, 26, 0.55);
  opacity: 0;
  pointer-events: none;
}

dialog.modal::backdrop {
  background: transparent;
}

dialog.modal {
  border: 0;
  margin: auto;
  position: fixed;
  inset: 0;
  width: min(78vw, 300px);
  height: fit-content;
  padding: clamp(12px, 4.5vmin, 22px);
  border-radius: 16px;
  background: #ffffff;
  color: #17141a;
  box-shadow: 0 14px 24px rgba(23, 20, 26, 0.32);
  opacity: 0;
  transform: scale(0.92) translateY(10px);
}
dialog.modal h2 {
  margin: 0 0 6px;
  font-size: clamp(13px, 4.4vmin, 18px);
}
dialog.modal p {
  margin: 0 0 14px;
  font-size: clamp(10px, 3.2vmin, 13px);
  color: rgba(23, 20, 26, 0.65);
}
dialog.modal {
  transition: opacity 300ms ease-out, transform 300ms ease-out, overlay 300ms allow-discrete, display 300ms allow-discrete;
}
dialog.modal[open] {
  opacity: 1;
  transform: none;
}
@starting-style {
  dialog.modal[open] {
    opacity: 0;
    transform: scale(0.92) translateY(10px);
  }
}

.modal__close {
  border: 0;
  border-radius: 12px;
  background: #2f6df6;
  color: #ffffff;
  padding: clamp(7px, 2.6vmin, 9px) clamp(14px, 4.6vmin, 18px);
  font-weight: 600;
  font-size: clamp(11px, 3.4vmin, 13px);
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
}

.overlay.is-demo {
  animation: overlay-loop 2s ease-in-out infinite;
}

dialog.modal.is-demo {
  animation: dialog-loop 2s ease-out infinite;
}

@keyframes overlay-loop {
  0% {
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  85% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes dialog-loop {
  0% {
    opacity: 0;
    transform: scale(0.92) translateY(10px);
  }
  15% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  70% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  85% {
    opacity: 0;
    transform: scale(0.92) translateY(10px);
  }
  100% {
    opacity: 0;
    transform: scale(0.92) translateY(10px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .overlay.is-demo, dialog.modal.is-demo {
    animation: none;
  }
  dialog.modal {
    transition-duration: 1ms;
  }
}

// 데모는 open 속성이 그대로 켜진 <dialog> 를 keyframes 로 접었다 편다.
// 실제 클릭은 진짜 close()/showModal() 을 불러 top layer·::backdrop·포커스 트랩까지 켠다.
(function () {
  var stage = document.querySelector('.stage');
  var overlay = document.querySelector('.overlay');
  var dialog = document.querySelector('.modal');
  var trigger = document.querySelector('.trigger');
  var close = document.querySelector('.modal__close');
  function stopDemo() { stage.classList.add('is-real'); overlay.classList.remove('is-demo'); dialog.classList.remove('is-demo'); }
  close.addEventListener('click', function () { stopDemo(); dialog.close(); });
  trigger.addEventListener('click', function () { stopDemo(); dialog.showModal(); });
  dialog.addEventListener('cancel', function () { stopDemo(); });
})();

import { useEffect, useRef, useState } from "react";
import type { CSSProperties } from "react";
import styles from "./NativeDialog.module.scss";

export type NativeDialogProps = {
  triggerLabel: string;
  title: string;
  description: string;
  closeLabel: string;
  /** 대화상자가 뜨는 시간 (기본 300ms) */
  duration?: number;
  easing?: string;
  color?: string;
};

type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };

export default function NativeDialog({
  triggerLabel,
  title,
  description,
  closeLabel,
  duration = 300,
  easing = "ease-out",
  color = "#fff7e6",
}: NativeDialogProps) {
  const ref = useRef<HTMLDialogElement>(null);
  const [open, setOpen] = useState(false);
  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };

  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    if (open && !el.open) el.showModal();
    if (!open && el.open) el.close();
  }, [open]);

  return (
    <div className={styles.stage} style={vars}>
      <button type="button" className={styles.trigger} onClick={() => setOpen(true)}>
        {triggerLabel}
      </button>
      <dialog
        ref={ref}
        className={styles.modal}
        onCancel={() => setOpen(false)}
        onClose={() => setOpen(false)}
      >
        <h2>{title}</h2>
        <p>{description}</p>
        <button type="button" className={styles.close} onClick={() => setOpen(false)}>
          {closeLabel}
        </button>
      </dialog>
    </div>
  );
}

新しいタブで開く

05 · ネイティブ dialog — 計測累積面積 25.228% · 動いたフレーム 8/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

@starting-styleallow-discrete::backdrop

向いている場面

overlay 用の背景と ::backdrop が二重にならないよう、::backdrop は透明にしてあります。

dialog.modal::backdrop { background: transparent; }

dialog.modal {
  opacity: 0;
  transform: scale(.92) translateY(10px);
  transition: opacity 300ms $ease-out,
              transform 300ms $ease-out,
              overlay 300ms allow-discrete,
              display 300ms allow-discrete;
  &[open] { opacity: 1; transform: none; }
  @starting-style {
    &[open] { opacity: 0; transform: scale(.92) translateY(10px); }
  }
}

06ポップオーバー確認

動きの内容

削除確認のような小さな確認窓は、ボタンのすぐ上に anchor で貼り付けます。

<main class="stage">
  <div class="anchor is-demo">
    <button class="trigger" type="button" aria-label="削除">削除</button>
    <div class="confirm" role="dialog" aria-label="削除の確認">
      <p>本当に削除しますか？</p>
      <div class="confirm__row">
        <button class="confirm__yes" type="button">削除</button>
        <button class="confirm__no" type="button">キャンセル</button>
      </div>
    </div>
  </div>
</main>

@use "../../../../site/static/demo-tokens" as *;

// ── 변수 3개 ──────────────────────────────────────────
$duration: $dur-quick;     // 뜨는 시간
$easing: $ease-pop;        // 살짝 튀며 나타난다
$color: $subject-ink;      // 강조색(버튼)

@include stage($stage-yellow);

.anchor { position: relative; display: inline-block; }

.trigger {
  border: 0; border-radius: $r-control;
  padding: clamp(9px, 3vmin, 12px) clamp(16px, 5.4vmin, 22px);
  font-weight: 600;
  font-size: clamp(12px, 3.6vmin, 15px);
  line-height: 1;
  font-family: inherit;
  color: $stage-yellow; background: $color;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}

// popover 속성이 없을 때(데모 기본값)는 평범한 상자로 그린다 — 화살표 없이, 버튼 바로 위
.confirm {
  position: absolute; left: 50%; bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(6px) scale(.92);
  opacity: 0; pointer-events: none;
  width: clamp(140px, 46vmin, 190px);
  padding: clamp(10px, 3.4vmin, 14px);
  border-radius: $r-card; background: $stage-paper; color: $stage-ink;
  box-shadow: $shadow-raised;
  transition: opacity $duration $easing, transform $duration $easing;
  margin: 0; border: 0;

  p { margin: 0 0 10px; font-size: clamp(10px, 3.2vmin, 12px); }
}

// 진짜 Popover API 로 켜졌을 때는 top layer 위에서 같은 자리에 뜨게 좌표만 다시 잡는다
.confirm:popover-open {
  position: fixed; inset: auto;
  opacity: 1; transform: translateX(-50%) translateY(0) scale(1);
}

.confirm__row { display: flex; gap: clamp(6px, 2vmin, 8px); }
.confirm__yes, .confirm__no {
  flex: 1; border: 0; border-radius: $r-control;
  padding: clamp(6px, 2.2vmin, 8px) 0;
  font-weight: 600;
  font-size: clamp(10px, 3vmin, 12px);
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
}
.confirm__yes { background: $error; color: $stage-paper; }
.confirm__no  { background: $error-soft; color: $error; }

.anchor.is-demo .confirm { animation: confirm-loop $dur-loop $easing infinite; }

@keyframes confirm-loop {
  0%   { opacity: 0; transform: translateX(-50%) translateY(6px) scale(.92); }
  15%  { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  70%  { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  85%  { opacity: 0; transform: translateX(-50%) translateY(6px) scale(.92); }
  100% { opacity: 0; transform: translateX(-50%) translateY(6px) scale(.92); }
}

@media (prefers-reduced-motion: reduce) {
  .anchor.is-demo .confirm { animation: none; }
  .confirm { transition-duration: 1ms; }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #ffd23f;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.anchor {
  position: relative;
  display: inline-block;
}

.trigger {
  border: 0;
  border-radius: 12px;
  padding: clamp(9px, 3vmin, 12px) clamp(16px, 5.4vmin, 22px);
  font-weight: 600;
  font-size: clamp(12px, 3.6vmin, 15px);
  line-height: 1;
  font-family: inherit;
  color: #ffd23f;
  background: #17141a;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.confirm {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(6px) scale(0.92);
  opacity: 0;
  pointer-events: none;
  width: clamp(140px, 46vmin, 190px);
  padding: clamp(10px, 3.4vmin, 14px);
  border-radius: 16px;
  background: #ffffff;
  color: #17141a;
  box-shadow: 0 14px 24px rgba(23, 20, 26, 0.32);
  transition: opacity 220ms cubic-bezier(0.2, 1.4, 0.4, 1), transform 220ms cubic-bezier(0.2, 1.4, 0.4, 1);
  margin: 0;
  border: 0;
}
.confirm p {
  margin: 0 0 10px;
  font-size: clamp(10px, 3.2vmin, 12px);
}

.confirm:popover-open {
  position: fixed;
  inset: auto;
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

.confirm__row {
  display: flex;
  gap: clamp(6px, 2vmin, 8px);
}

.confirm__yes, .confirm__no {
  flex: 1;
  border: 0;
  border-radius: 12px;
  padding: clamp(6px, 2.2vmin, 8px) 0;
  font-weight: 600;
  font-size: clamp(10px, 3vmin, 12px);
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
}

.confirm__yes {
  background: #c2361a;
  color: #ffffff;
}

.confirm__no {
  background: #ffe0d8;
  color: #c2361a;
}

.anchor.is-demo .confirm {
  animation: confirm-loop 2s cubic-bezier(0.2, 1.4, 0.4, 1) infinite;
}

@keyframes confirm-loop {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(6px) scale(0.92);
  }
  15% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
  70% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
  85% {
    opacity: 0;
    transform: translateX(-50%) translateY(6px) scale(0.92);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(6px) scale(0.92);
  }
}
@media (prefers-reduced-motion: reduce) {
  .anchor.is-demo .confirm {
    animation: none;
  }
  .confirm {
    transition-duration: 1ms;
  }
}

// 데모는 anchor 에 .is-demo 를 걸어 keyframes 로 반복. 실제 클릭은 진짜 Popover API 로 전환한다.
(function () {
  var anchor = document.querySelector('.anchor');
  var trigger = document.querySelector('.trigger');
  var confirm = document.querySelector('.confirm');
  var yes = document.querySelector('.confirm__yes');
  var no = document.querySelector('.confirm__no');
  function stopDemo() { anchor.classList.remove('is-demo'); }
  function show() {
    stopDemo();
    if (!confirm.hasAttribute('popover')) confirm.setAttribute('popover', 'manual');
    confirm.showPopover();
  }
  function hide() { if (confirm.hasAttribute('popover')) confirm.hidePopover(); }
  trigger.addEventListener('click', show);
  no.addEventListener('click', hide);
  yes.addEventListener('click', hide);
})();

import { useRef, useState } from "react";
import type { CSSProperties } from "react";
import styles from "./PopoverConfirm.module.scss";

export type PopoverConfirmProps = {
  triggerLabel: string;
  question: string;
  confirmLabel: string;
  cancelLabel: string;
  onConfirm?: () => void;
  /** 뜨는 시간 (기본 220ms) */
  duration?: number;
  easing?: string;
  color?: string;
};

type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };

export default function PopoverConfirm({
  triggerLabel,
  question,
  confirmLabel,
  cancelLabel,
  onConfirm,
  duration = 220,
  easing = "cubic-bezier(.2,1.4,.4,1)",
  color = "#17141a",
}: PopoverConfirmProps) {
  const ref = useRef<HTMLDivElement>(null);
  const [open, setOpen] = useState(false);
  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };

  function show() {
    const el = ref.current as (HTMLDivElement & { showPopover?: () => void }) | null;
    if (el) {
      if (!el.hasAttribute("popover")) el.setAttribute("popover", "manual");
      el.showPopover?.();
    }
    setOpen(true);
  }
  function hide() {
    const el = ref.current as (HTMLDivElement & { hidePopover?: () => void }) | null;
    el?.hidePopover?.();
    setOpen(false);
  }

  return (
    <div className={styles.anchor} style={vars}>
      <button type="button" className={styles.trigger} onClick={show}>
        {triggerLabel}
      </button>
      <div ref={ref} className={open ? `${styles.confirm} ${styles.isOpen}` : styles.confirm}>
        <p>{question}</p>
        <div className={styles.row}>
          <button
            type="button"
            className={styles.yes}
            onClick={() => {
              onConfirm?.();
              hide();
            }}
          >
            {confirmLabel}
          </button>
          <button type="button" className={styles.no} onClick={hide}>
            {cancelLabel}
          </button>
        </div>
      </div>
    </div>
  );
}

新しいタブで開く

06 · ポップオーバー確認 — 計測累積面積 10.85% · 動いたフレーム 6/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

anchor위쪽화살표 없이

使う場面

popover 属性が付く前は普通の position: absolute の箱として描き、実際に開くと :popover-open が座標を top layer 用に置き換えます。

.confirm {
  position: absolute; left: 50%; bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(6px) scale(.92);
  opacity: 0; pointer-events: none;
  transition: opacity 220ms $ease-pop,
              transform 220ms $ease-pop;
}

.confirm:popover-open {
  position: fixed; inset: auto;
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

07ボタンから全画面

どんな動きか

押したサムネイルそのものが画面いっぱいまで拡大し、そのまま全画面モーダルになります。

<main class="stage is-demo">
  <button class="thumb" type="button" aria-label="写真を大きく見る">
    <span class="thumb__caption">ゴールデンレトリバー・2026</span>
    <span class="thumb__close" aria-hidden="true">×</span>
  </button>
</main>

@use "../../../../site/static/demo-tokens" as *;

// ── 변수 3개 ──────────────────────────────────────────
$duration: $dur-enter;     // 커지는 시간
$easing: $ease-spring;
$color: $subject-cream;    // 강조색(캡션·닫기)

@include stage($stage-orange);

// 실제로는 width/height 를 바꾸지 않는다. inset:0 인 상자를 transform: scale 로만 줄여
// "작은 썸네일" 처럼 보이게 한다 — 커질 때도 레이아웃 재계산이 없다
.thumb {
  position: fixed; inset: 0; margin: 0; padding: 0; border: 0;
  border-radius: $r-card; overflow: hidden; cursor: pointer;
  background: linear-gradient(160deg, $subject-cream, $stage-paper);
  box-shadow: $shadow-raised;
  transform: translate(-30%, 20%) scale(.3);
  transform-origin: 20% 75%; // 규칙8: 썸네일 자리 앵커 확대
  transition: transform $duration $easing, border-radius $duration $easing;
  -webkit-tap-highlight-color: transparent;
}

.thumb__caption {
  position: absolute; left: clamp(10px, 3vmin, 16px); bottom: clamp(10px, 3vmin, 16px);
  font-weight: 600;
  font-size: clamp(11px, 3.4vmin, 14px);
  line-height: 1;
  font-family: inherit;
  color: $stage-ink;
  opacity: 0; transition: opacity $duration $easing;
}

.thumb__close {
  position: absolute; right: clamp(10px, 3vmin, 16px); top: clamp(10px, 3vmin, 16px);
  width: clamp(20px, 6vmin, 26px); height: clamp(20px, 6vmin, 26px);
  display: grid; place-items: center; border-radius: 50%;
  background: rgba($stage-ink, .55); color: $color; font-size: clamp(13px, 3.8vmin, 16px);
  opacity: 0; transition: opacity $duration $easing;
}

.stage.is-open .thumb {
  transform: translate(0, 0) scale(1);
  border-radius: 0;
}
.stage.is-open .thumb__caption,
.stage.is-open .thumb__close { opacity: 1; }

.stage.is-demo .thumb { animation: thumb-loop $dur-loop $easing infinite; }
.stage.is-demo .thumb__caption,
.stage.is-demo .thumb__close { animation: fade-loop $dur-loop ease-in-out infinite; }

@keyframes thumb-loop {
  0%   { transform: translate(-30%, 20%) scale(.3); border-radius: $r-card; }
  20%  { transform: translate(0, 0) scale(1);       border-radius: 0; }
  65%  { transform: translate(0, 0) scale(1);        border-radius: 0; }
  85%  { transform: translate(-30%, 20%) scale(.3);  border-radius: $r-card; }
  100% { transform: translate(-30%, 20%) scale(.3);  border-radius: $r-card; }
}
@keyframes fade-loop {
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  65%  { opacity: 1; }
  85%  { opacity: 0; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .stage.is-demo .thumb,
  .stage.is-demo .thumb__caption,
  .stage.is-demo .thumb__close { animation: none; }
  .thumb, .thumb__caption, .thumb__close { transition-duration: 1ms; }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #ff4d1f;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.thumb {
  position: fixed;
  inset: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  background: linear-gradient(160deg, #fff7e6, #ffffff);
  box-shadow: 0 14px 24px rgba(23, 20, 26, 0.32);
  transform: translate(-30%, 20%) scale(0.3);
  transform-origin: 20% 75%;
  transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1), border-radius 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
  -webkit-tap-highlight-color: transparent;
}

.thumb__caption {
  position: absolute;
  left: clamp(10px, 3vmin, 16px);
  bottom: clamp(10px, 3vmin, 16px);
  font-weight: 600;
  font-size: clamp(11px, 3.4vmin, 14px);
  line-height: 1;
  font-family: inherit;
  color: #17141a;
  opacity: 0;
  transition: opacity 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.thumb__close {
  position: absolute;
  right: clamp(10px, 3vmin, 16px);
  top: clamp(10px, 3vmin, 16px);
  width: clamp(20px, 6vmin, 26px);
  height: clamp(20px, 6vmin, 26px);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(23, 20, 26, 0.55);
  color: #fff7e6;
  font-size: clamp(13px, 3.8vmin, 16px);
  opacity: 0;
  transition: opacity 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.stage.is-open .thumb {
  transform: translate(0, 0) scale(1);
  border-radius: 0;
}

.stage.is-open .thumb__caption,
.stage.is-open .thumb__close {
  opacity: 1;
}

.stage.is-demo .thumb {
  animation: thumb-loop 2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

.stage.is-demo .thumb__caption,
.stage.is-demo .thumb__close {
  animation: fade-loop 2s ease-in-out infinite;
}

@keyframes thumb-loop {
  0% {
    transform: translate(-30%, 20%) scale(0.3);
    border-radius: 16px;
  }
  20% {
    transform: translate(0, 0) scale(1);
    border-radius: 0;
  }
  65% {
    transform: translate(0, 0) scale(1);
    border-radius: 0;
  }
  85% {
    transform: translate(-30%, 20%) scale(0.3);
    border-radius: 16px;
  }
  100% {
    transform: translate(-30%, 20%) scale(0.3);
    border-radius: 16px;
  }
}
@keyframes fade-loop {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  65% {
    opacity: 1;
  }
  85% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .stage.is-demo .thumb,
  .stage.is-demo .thumb__caption,
  .stage.is-demo .thumb__close {
    animation: none;
  }
  .thumb, .thumb__caption, .thumb__close {
    transition-duration: 1ms;
  }
}

(function () {
  var stage = document.querySelector('.stage');
  var thumb = document.querySelector('.thumb');
  var isOpen = false;
  thumb.addEventListener('click', function () {
    stage.classList.remove('is-demo');
    isOpen = !isOpen;
    stage.classList.toggle('is-open', isOpen);
  });
  document.addEventListener('keydown', function (e) {
    if (e.key === 'Escape' && isOpen) { isOpen = false; stage.classList.remove('is-open'); }
  });
})();

import { useState } from "react";
import type { CSSProperties } from "react";
import styles from "./FullscreenTakeover.module.scss";

export type FullscreenTakeoverProps = {
  caption: string;
  /** 커지는 시간 (기본 600ms) */
  duration?: number;
  easing?: string;
  color?: string;
};

type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };

export default function FullscreenTakeover({
  caption,
  duration = 600,
  easing = "cubic-bezier(.2,.8,.2,1)",
  color = "#fff7e6",
}: FullscreenTakeoverProps) {
  const [open, setOpen] = useState(false);
  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };

  return (
    <div className={styles.stage} style={vars}>
      <button
        type="button"
        className={open ? `${styles.thumb} ${styles.isOpen}` : styles.thumb}
        aria-label={caption}
        onClick={() => setOpen((v) => !v)}
      >
        <span className={styles.caption}>{caption}</span>
        <span className={styles.close} aria-hidden="true">×</span>
      </button>
    </div>
  );
}

新しいタブで開く

07 · ボタンから全画面 — 計測累積面積 96.809% · 動いたフレーム 11/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

420ms둥글게 유지페이드 섞기

使いどころ

width や height ではなく transform: scale だけを動かすので、拡大している間もレイアウトの再計算が起きません。

.thumb {
  position: fixed; inset: 0;
  transform: translate(-30%, 20%) scale(.3);
  transform-origin: 20% 75%;
  transition: transform 600ms $ease-spring,
              border-radius 600ms $ease-spring;
}

.stage.is-open .thumb {
  transform: translate(0, 0) scale(1);
  border-radius: 0;
}

08外側クリックで揺れる

何が起きるか

規約同意のような閉じられないモーダルでは、外側を押しても閉じずに横へ小さく揺れて知らせます。

<main class="stage is-demo">
  <div class="overlay"></div>
  <div class="modal" role="dialog" aria-modal="true" aria-labelledby="t8">
    <h2 id="t8">利用規約に同意すると続けられます</h2>
    <p>外側をクリックしても閉じず、少し揺れるだけです。</p>
    <button class="modal__accept" type="button">同意して続ける</button>
  </div>
</main>

@use "../../../../site/static/demo-tokens" as *;

// ── 변수 3개 ──────────────────────────────────────────
$duration: $dur-base;      // 흔들림 지속 시간
$easing: $ease-spring;     // 실제 흔들림엔 별도 cubic-bezier 를 쓴다(아래)
$color: $subject-ink;      // 강조색(버튼)

@include stage($stage-paper);

.stage { position: relative; }

// 닫을 수 없는 모달이라 열린 채로 고정. 오버레이는 어둡게만 유지한다
.overlay {
  position: fixed; inset: 0;
  background: rgba($stage-ink, .45);
}

.modal {
  position: fixed; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(80vw, 300px);
  padding: clamp(12px, 4.5vmin, 22px);
  border-radius: $r-card; background: $stage-paper; color: $stage-ink;
  border: 2px solid rgba($stage-ink, .12);
  box-shadow: $shadow-raised;

  h2 { margin: 0 0 6px; font-size: clamp(13px, 4.2vmin, 17px); }
  p  { margin: 0 0 14px; font-size: clamp(10px, 3.2vmin, 13px); color: rgba($stage-ink, .65); }
}

.modal__accept {
  border: 0; border-radius: $r-control; background: $color; color: $stage-paper;
  padding: clamp(7px, 2.6vmin, 9px) clamp(14px, 4.6vmin, 18px);
  font-weight: 600;
  font-size: clamp(11px, 3.4vmin, 13px);
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
}

.modal.is-shaking {
  animation: shake $duration cubic-bezier(.36, .07, .19, .97) both;
  border-color: $error;
}

@keyframes shake {
  10%, 90% { transform: translate(calc(-50% - 3px), -50%); }
  20%, 80% { transform: translate(calc(-50% + 4px), -50%); border-color: $error; }
  30%, 70% { transform: translate(calc(-50% - 4px), -50%); }
  40%, 60% { transform: translate(calc(-50% + 3px), -50%); }
  50%      { transform: translate(calc(-50% - 3px), -50%); border-color: $error; }
}

// 데모: 2초마다 두 번씩 흔든다
.stage.is-demo .modal { animation: shake-loop $dur-loop cubic-bezier(.36, .07, .19, .97) infinite; }

@keyframes shake-loop {
  0%, 40%, 100% { transform: translate(-50%, -50%); border-color: rgba($stage-ink, .12); }
  44%  { transform: translate(calc(-50% - 4px), -50%); border-color: $error; }
  48%  { transform: translate(calc(-50% + 4px), -50%); }
  52%  { transform: translate(calc(-50% - 4px), -50%); border-color: $error; }
  56%  { transform: translate(calc(-50% + 3px), -50%); }
  60%  { transform: translate(-50%, -50%); border-color: rgba($stage-ink, .12); }
}

@media (prefers-reduced-motion: reduce) {
  .stage.is-demo .modal, .modal.is-shaking { animation: none; }
  .modal.is-shaking { border-color: $error; }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #ffffff;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.stage {
  position: relative;
}

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(23, 20, 26, 0.45);
}

.modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(80vw, 300px);
  padding: clamp(12px, 4.5vmin, 22px);
  border-radius: 16px;
  background: #ffffff;
  color: #17141a;
  border: 2px solid rgba(23, 20, 26, 0.12);
  box-shadow: 0 14px 24px rgba(23, 20, 26, 0.32);
}
.modal h2 {
  margin: 0 0 6px;
  font-size: clamp(13px, 4.2vmin, 17px);
}
.modal p {
  margin: 0 0 14px;
  font-size: clamp(10px, 3.2vmin, 13px);
  color: rgba(23, 20, 26, 0.65);
}

.modal__accept {
  border: 0;
  border-radius: 12px;
  background: #17141a;
  color: #ffffff;
  padding: clamp(7px, 2.6vmin, 9px) clamp(14px, 4.6vmin, 18px);
  font-weight: 600;
  font-size: clamp(11px, 3.4vmin, 13px);
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
}

.modal.is-shaking {
  animation: shake 300ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  border-color: #c2361a;
}

@keyframes shake {
  10%, 90% {
    transform: translate(calc(-50% - 3px), -50%);
  }
  20%, 80% {
    transform: translate(calc(-50% + 4px), -50%);
    border-color: #c2361a;
  }
  30%, 70% {
    transform: translate(calc(-50% - 4px), -50%);
  }
  40%, 60% {
    transform: translate(calc(-50% + 3px), -50%);
  }
  50% {
    transform: translate(calc(-50% - 3px), -50%);
    border-color: #c2361a;
  }
}
.stage.is-demo .modal {
  animation: shake-loop 2s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;
}

@keyframes shake-loop {
  0%, 40%, 100% {
    transform: translate(-50%, -50%);
    border-color: rgba(23, 20, 26, 0.12);
  }
  44% {
    transform: translate(calc(-50% - 4px), -50%);
    border-color: #c2361a;
  }
  48% {
    transform: translate(calc(-50% + 4px), -50%);
  }
  52% {
    transform: translate(calc(-50% - 4px), -50%);
    border-color: #c2361a;
  }
  56% {
    transform: translate(calc(-50% + 3px), -50%);
  }
  60% {
    transform: translate(-50%, -50%);
    border-color: rgba(23, 20, 26, 0.12);
  }
}
@media (prefers-reduced-motion: reduce) {
  .stage.is-demo .modal, .modal.is-shaking {
    animation: none;
  }
  .modal.is-shaking {
    border-color: #c2361a;
  }
}

// 실제 클릭: 바깥(overlay)을 누르면 닫히는 대신 흔들린다.
(function () {
  var stage = document.querySelector('.stage');
  var overlay = document.querySelector('.overlay');
  var modal = document.querySelector('.modal');
  overlay.addEventListener('click', function () {
    stage.classList.remove('is-demo');
    modal.classList.remove('is-shaking');
    void modal.offsetWidth;
    modal.classList.add('is-shaking');
  });
  modal.addEventListener('animationend', function (e) {
    if (e.animationName === 'shake') modal.classList.remove('is-shaking');
  });
})();

import { useState } from "react";
import type { CSSProperties } from "react";
import styles from "./ShakeOutsideModal.module.scss";

export type ShakeOutsideModalProps = {
  title: string;
  description: string;
  acceptLabel: string;
  onAccept?: () => void;
  /** 흔들림 지속 시간 (기본 300ms) */
  duration?: number;
  easing?: string;
  color?: string;
};

type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };

export default function ShakeOutsideModal({
  title,
  description,
  acceptLabel,
  onAccept,
  duration = 300,
  easing = "cubic-bezier(.36,.07,.19,.97)",
  color = "#17141a",
}: ShakeOutsideModalProps) {
  const [shakeKey, setShakeKey] = useState(0);
  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };

  return (
    <div className={styles.stage} style={vars}>
      <div className={styles.overlay} onClick={() => setShakeKey((k) => k + 1)} />
      <div
        key={shakeKey}
        className={shakeKey ? `${styles.modal} ${styles.isShaking}` : styles.modal}
        role="dialog"
        aria-modal="true"
      >
        <h2>{title}</h2>
        <p>{description}</p>
        <button type="button" className={styles.accept} onClick={onAccept}>
          {acceptLabel}
        </button>
      </div>
    </div>
  );
}

新しいタブで開く

08 · 外側クリックで揺れる — 計測累積面積 5.663% · 動いたフレーム 6/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

4px두 번테두리 강조

向いている場面

transform の translate を左右に往復させる keyframes だけで作り、閉じる処理自体は呼びません。

.modal.is-shaking {
  animation: shake 300ms cubic-bezier(.36, .07, .19, .97) both;
  border-color: $error;
}

@keyframes shake {
  10%, 90% { transform: translate(calc(-50% - 3px), -50%); }
  20%, 80% { transform: translate(calc(-50% + 4px), -50%); border-color: $error; }
  30%, 70% { transform: translate(calc(-50% - 4px), -50%); }
  40%, 60% { transform: translate(calc(-50% + 3px), -50%); }
  50%      { transform: translate(calc(-50% - 3px), -50%); border-color: $error; }
}

09重なるモーダル

動きの内容

多段フォームで2つ目のモーダルを開くと、1つ目は少し縮んで奥へ下がり、2つ目が手前に重なって現れます。

<main class="stage is-demo">
  <div class="overlay"></div>
  <div class="modal modal--1" role="dialog" aria-modal="true" aria-labelledby="t9a">
    <h2 id="t9a">配送先を入力</h2>
    <p>住所を入力してから郵便番号を検索してください。</p>
    <button class="modal__next" type="button">郵便番号を検索</button>
  </div>
  <div class="modal modal--2" role="dialog" aria-modal="true" aria-labelledby="t9b">
    <h2 id="t9b">郵便番号を検索</h2>
    <p>道路名で検索すると早いです。</p>
    <button class="modal__back" type="button">この住所を選択</button>
  </div>
</main>

@use "../../../../site/static/demo-tokens" as *;

// ── 변수 3개 ──────────────────────────────────────────
$duration: $dur-enter;     // 두 번째 모달이 뜨는 시간
$easing: $ease-spring;
$color: $subject-blue;     // 강조색(버튼)

@include stage($stage-ink);

.stage { position: relative; }

.overlay {
  position: fixed; inset: 0;
  background: rgba($stage-ink, .35);
  transition: background $duration $easing;
}

.modal {
  position: fixed; left: 50%; top: 50%;
  width: min(78vw, 300px);
  padding: clamp(12px, 4.5vmin, 22px);
  border-radius: $r-card; background: $stage-paper; color: $stage-ink;
  box-shadow: $shadow-raised;

  h2 { margin: 0 0 6px; font-size: clamp(13px, 4.2vmin, 17px); }
  p  { margin: 0 0 14px; font-size: clamp(10px, 3.2vmin, 13px); color: rgba($stage-ink, .65); }
}

.modal__next, .modal__back {
  border: 0; border-radius: $r-control; background: $color; color: $stage-paper;
  padding: clamp(7px, 2.6vmin, 9px) clamp(14px, 4.6vmin, 18px);
  font-weight: 600;
  font-size: clamp(11px, 3.4vmin, 13px);
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
}

// 1번 모달: 평소엔 정면, 2번이 열리면 뒤로 물러나 작아진다
.modal--1 {
  transform: translate(-50%, -50%);
  transition: transform $duration $easing, opacity $duration $easing;
}
// 2번 모달: 평소엔 숨어 있다가 열리면 앞으로
.modal--2 {
  transform: translate(-50%, -50%) translateY(10px) scale(.9);
  opacity: 0; pointer-events: none;
  transition: transform $duration $easing, opacity $duration $easing;
}

.stage.is-stacked .overlay { background: rgba($stage-ink, .6); }
.stage.is-stacked .modal--1 { transform: translate(-50%, calc(-50% - 16px)) scale(.95); opacity: .55; }
.stage.is-stacked .modal--2 { transform: translate(-50%, -50%) translateY(0) scale(1); opacity: 1; pointer-events: auto; }

.stage.is-demo .overlay      { animation: overlay-loop $dur-loop ease-in-out infinite; }
.stage.is-demo .modal--1     { animation: back-loop $dur-loop $easing infinite; }
.stage.is-demo .modal--2     { animation: front-loop $dur-loop $easing infinite; }

@keyframes overlay-loop {
  0%, 40%   { background: rgba($stage-ink, .35); }
  55%, 80%  { background: rgba($stage-ink, .6); }
  95%, 100% { background: rgba($stage-ink, .35); }
}
@keyframes back-loop {
  0%, 40%   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  55%, 80%  { transform: translate(-50%, calc(-50% - 16px)) scale(.95); opacity: .55; }
  95%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
@keyframes front-loop {
  0%, 40%   { transform: translate(-50%, -50%) translateY(10px) scale(.9); opacity: 0; }
  55%, 80%  { transform: translate(-50%, -50%) translateY(0) scale(1); opacity: 1; }
  95%, 100% { transform: translate(-50%, -50%) translateY(10px) scale(.9); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .stage.is-demo .overlay, .stage.is-demo .modal--1, .stage.is-demo .modal--2 { animation: none; }
  .overlay, .modal--1, .modal--2 { transition-duration: 1ms; }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #17141a;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.stage {
  position: relative;
}

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(23, 20, 26, 0.35);
  transition: background 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.modal {
  position: fixed;
  left: 50%;
  top: 50%;
  width: min(78vw, 300px);
  padding: clamp(12px, 4.5vmin, 22px);
  border-radius: 16px;
  background: #ffffff;
  color: #17141a;
  box-shadow: 0 14px 24px rgba(23, 20, 26, 0.32);
}
.modal h2 {
  margin: 0 0 6px;
  font-size: clamp(13px, 4.2vmin, 17px);
}
.modal p {
  margin: 0 0 14px;
  font-size: clamp(10px, 3.2vmin, 13px);
  color: rgba(23, 20, 26, 0.65);
}

.modal__next, .modal__back {
  border: 0;
  border-radius: 12px;
  background: #2f6df6;
  color: #ffffff;
  padding: clamp(7px, 2.6vmin, 9px) clamp(14px, 4.6vmin, 18px);
  font-weight: 600;
  font-size: clamp(11px, 3.4vmin, 13px);
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
}

.modal--1 {
  transform: translate(-50%, -50%);
  transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.modal--2 {
  transform: translate(-50%, -50%) translateY(10px) scale(0.9);
  opacity: 0;
  pointer-events: none;
  transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.stage.is-stacked .overlay {
  background: rgba(23, 20, 26, 0.6);
}

.stage.is-stacked .modal--1 {
  transform: translate(-50%, calc(-50% - 16px)) scale(0.95);
  opacity: 0.55;
}

.stage.is-stacked .modal--2 {
  transform: translate(-50%, -50%) translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.stage.is-demo .overlay {
  animation: overlay-loop 2s ease-in-out infinite;
}

.stage.is-demo .modal--1 {
  animation: back-loop 2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

.stage.is-demo .modal--2 {
  animation: front-loop 2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

@keyframes overlay-loop {
  0%, 40% {
    background: rgba(23, 20, 26, 0.35);
  }
  55%, 80% {
    background: rgba(23, 20, 26, 0.6);
  }
  95%, 100% {
    background: rgba(23, 20, 26, 0.35);
  }
}
@keyframes back-loop {
  0%, 40% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  55%, 80% {
    transform: translate(-50%, calc(-50% - 16px)) scale(0.95);
    opacity: 0.55;
  }
  95%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}
@keyframes front-loop {
  0%, 40% {
    transform: translate(-50%, -50%) translateY(10px) scale(0.9);
    opacity: 0;
  }
  55%, 80% {
    transform: translate(-50%, -50%) translateY(0) scale(1);
    opacity: 1;
  }
  95%, 100% {
    transform: translate(-50%, -50%) translateY(10px) scale(0.9);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .stage.is-demo .overlay, .stage.is-demo .modal--1, .stage.is-demo .modal--2 {
    animation: none;
  }
  .overlay, .modal--1, .modal--2 {
    transition-duration: 1ms;
  }
}

(function () {
  var stage = document.querySelector('.stage');
  var next = document.querySelector('.modal__next');
  var back = document.querySelector('.modal__back');
  next.addEventListener('click', function () { stage.classList.remove('is-demo'); stage.classList.add('is-stacked'); });
  back.addEventListener('click', function () { stage.classList.remove('is-stacked'); });
})();

import { useState } from "react";
import type { CSSProperties } from "react";
import styles from "./StackedModals.module.scss";

export type StackedModalsProps = {
  firstTitle: string;
  firstDescription: string;
  nextLabel: string;
  secondTitle: string;
  secondDescription: string;
  backLabel: string;
  /** 두 번째 모달이 뜨는 시간 (기본 600ms) */
  duration?: number;
  easing?: string;
  color?: string;
};

type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };

export default function StackedModals({
  firstTitle,
  firstDescription,
  nextLabel,
  secondTitle,
  secondDescription,
  backLabel,
  duration = 600,
  easing = "cubic-bezier(.2,.8,.2,1)",
  color = "#2f6df6",
}: StackedModalsProps) {
  const [stacked, setStacked] = useState(false);
  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };

  return (
    <div className={styles.stage} style={vars}>
      <div className={stacked ? `${styles.overlay} ${styles.isStacked}` : styles.overlay} />
      <div className={stacked ? `${styles.modal} ${styles.back}` : styles.modal}>
        <h2>{firstTitle}</h2>
        <p>{firstDescription}</p>
        <button type="button" className={styles.next} onClick={() => setStacked(true)}>
          {nextLabel}
        </button>
      </div>
      <div className={stacked ? `${styles.modal2} ${styles.isOpen}` : styles.modal2}>
        <h2>{secondTitle}</h2>
        <p>{secondDescription}</p>
        <button type="button" className={styles.back2} onClick={() => setStacked(false)}>
          {backLabel}
        </button>
      </div>
    </div>
  );
}

新しいタブで開く

09 · 重なるモーダル — 計測累積面積 28.221% · 動いたフレーム 8/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

0.95어둡게3단

使う場面

動くのはどちらも transform と opacity だけなので、重なる枚数が増えても仕組みは変わりません。

.stage.is-stacked .modal--1 {
  transform: translate(-50%, calc(-50% - 16px)) scale(.95);
  opacity: .55;
}
.stage.is-stacked .modal--2 {
  transform: translate(-50%, -50%) translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.modal--1, .modal--2 {
  transition: transform 600ms $ease-spring,
              opacity 600ms $ease-spring;
}

どこで崩れるか — 落とし穴

ネイティブ dialog の背景

9つのうち動きが一番怪しいのは05のネイティブ dialog です。<dialog> は showModal() を呼ぶとブラウザが自前の ::backdrop を top layer に生成するため、CSS で書いた .overlay をそのまま残すと背景が二重に暗くなります。今回のファイルでは css モーダル背景を1枚に保つため dialog.modal::backdrop { background: transparent; } として自前の overlay だけを見せていますが、この1行を忘れると開くたびに背景の濃さが変わって見えます。

ポップオーバーの位置

06のポップオーバー確認でも似たことが起きます。popover 属性が付く前の .confirm は position: absolute でボタンの真上に置いていますが、実際に showPopover() を呼ぶと要素は top layer に移動し、座標の基準が変わります。:popover-open の状態だけ位置を fixed に切り替えていなかったときは、実機で確認すると確認窓がボタンから離れた場所に飛んで出ました。

ブラウザ対応

3つ目はブラウザの対応状況です。<dialog> 要素自体は Chrome 37 以降・Safari 15.4 以降・Firefox 98 以降が対応済みですが（MDN の dialog ページ）、popover 属性は Chrome 114 以降・Safari 17 以降・Firefox 125 以降（MDN の Popover API）、@starting-style は Chrome 117 以降・Safari 17.5 以降・Firefox 129 以降でしか動きません（MDN の @starting-style）。zip の05と06のファイルは @supports で分岐させていないので、対応していないブラウザではアニメーションなしでそのまま開閉するだけになります。 09 の重なるモーダルを奥行きだけでなく時間差でも見せたいときは、要素ごとに開始時刻をずらすCSS アニメーション順番に表示 9選の遅延計算をそのまま流用できます。

修正した9本のファイルを開くパスワードは udnptj2b です。下のカードから zip を取ってください。

アクセシビリティ

動きを減らす設定のとき

9つとも prefers-reduced-motion: reduce では animation と transition の大部分を止め、開閉は一瞬で切り替わるだけになります。ただし08の「外側クリックで揺れる」だけは例外で、揺れそのものは消しても border-color: $error による赤い枠だけは残し、閉じられないという情報自体は動きがなくても伝わるようにしてあります。09の重なるモーダルは、動きを止めても手前と奥それぞれの scale と opacity の最終値はそのまま残るので、どちらが今の操作対象かは静止していても分かります。

@media (prefers-reduced-motion: reduce) {
  .overlay, .modal, .sheet, .drawer { transition-duration: 1ms; }
  .stage.is-demo .modal,
  .modal.is-shaking { animation: none; }
  .modal.is-shaking { border-color: $error; }
}

モーダル以外の CSS だけで動くパターンは CSS 分野のカテゴリー一覧にまとめてあり、このサイトの運営情報はサイト概要ページから見られます。

FAQ

css だけでモーダルを9つ同じページに全部置いても大丈夫ですか？

置けます。ただし05のネイティブ dialog と06の popover はどちらも開くとブラウザの top layer に乗るため、複数のダイアログを同時に開けるようにする場合は重なり順を個別に確認してください。01〜04・07〜09のように transform だけで作る自前のモーダルは z-index さえそろえておけば、いくつ並べても崩れません。同じ画面で03のサイドドロワーと隣り合いやすいのは上部メニューなので、開閉の動作がすでに一つあるならcss ハンバーガーメニューアニメーション9選でアイコン側の動きを合わせておくと揃います。

React ではクラスの付け外しの代わりに何を使いますか？

zip の react/ フォルダのコンポーネントは、CSS のクラス名を付け外しする代わりに、開いているかどうかを表す state をひとつだけ持たせています。05のネイティブ dialog だけは <dialog> 要素を参照して showModal() と close() を直接呼び分ける処理が入っています。

スマホでも同じように開閉しますか？

はい、動きます。02のボトムシートと03のサイドドロワーはどちらも transform だけで動くので、タッチでボタンを押した瞬間から同じ速さで滑ります。ただしスマホはアドレスバーの表示・非表示でビューポートの高さが変わる端末があるため、02の max-height: 62% は機種によって数ピクセルずれることがあります。

【コピペOK】CSS モーダル アニメーション 9選（dialog 対応）

01フェード＋拡大

どんな動きか

モーダル アニメーション css の使いどころ

02ボトムシート

何が起きるか

向いている場面

03サイドドロワー

動きの内容

使う場面

04背景ぼかし

どんな動きか

使いどころ

05ネイティブ dialog

何が起きるか

向いている場面

06ポップオーバー確認

動きの内容

使う場面

07ボタンから全画面

どんな動きか

使いどころ

08外側クリックで揺れる

何が起きるか

向いている場面

09重なるモーダル

動きの内容

使う場面

どこで崩れるか — 落とし穴

ネイティブ dialog の背景

ポップオーバーの位置

ブラウザ対応

アクセシビリティ

動きを減らす設定のとき

FAQ

css だけ で モーダルを9つ同じページに全部置いても大丈夫ですか？

React ではクラスの付け外しの代わりに何を使いますか？

スマホでも同じように開閉しますか？

こんな記事もどうぞ

【コピペOK】CSS モーダルアニメーション 9選（dialog 対応）

モーダルアニメーション css の使いどころ

css だけでモーダルを9つ同じページに全部置いても大丈夫ですか？