:active の縮小と退出時の blur で「押し出した」感を出す

どんな時に使う？

トースト・シート・メニューなど、画面端近くで出たり消えたりするインタラクティブ要素。ただの opacity フェードだと平面的なので、押し込みと押し出しの手応えを足したいときに使える。

コード

.panel {
  transition:
    transform 150ms ease,
    opacity 200ms ease,
    filter 200ms ease;
}

/* 押している間だけ少し縮める */
.panel:active {
  transform: scale(0.96);
}

/* 退出状態（例: 閉じるクラスや @starting-style 相手側） */
.panel.is-exiting {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(8px); /* 端から押し出す方向に合わせる */
}

• ポイントは「:active で scale(0.96)」と「退出で filter: blur(8px)＋移動」。数値は UI の大きさに合わせて微調整する。
• 出現方向と退出方向を揃えると、物理的に押し出された感じが出やすい。

注意点・対応状況

• filter: blur() は描画コストがある。大きなパネルや同時に多数動かす場合は控えめに。
• prefers-reduced-motion: reduce では transform / blur を切るか弱める。
• :active はタッチ端末でも効くが、クリック以外の閉じ方（外側タップ・Esc）では退出クラス側の演出だけが効く。両方の経路を揃える。

出典

• @kippe07 · 2026-10-09