メニューは「閉じる」を「開く」より速くする（退出の transition はベース側に書く）

どんな時に使う？

• ドロップダウンやポップオーバー、ドロワーの開閉アニメーションを作るとき。
• 開くときは利用者が中身を待っているので少しゆっくりでも気にならないが、閉じるときはもう次の操作に移っているので、遅い退出アニメはじゃまになる。

コード

/* 通常時（＝閉じる時に向かう状態）：退出は速く */
.menu {
  opacity: 0;
  transition: opacity 200ms ease-out;
}

/* 開いた状態（＝開く時に向かう状態）：登場は少しゆっくり */
.menu.open {
  opacity: 1;
  transition-duration: 320ms;
}

• .open が付くと、新しく当たるルール（320ms）の時間で開く。
• .open が外れると、通常のルール（200ms）の時間で閉じる。
• 同じ考え方で、transition-timing-function や transition-delay も開閉で変えられる（例：ホバーメニューを閉じる時だけ少し待つ）。

注意点

• 「どちらの状態に書いたか」で決まるので、.open 側に書いた値は「開く時」に、ベース側の値は「閉じる時」に効く、と覚えておくと迷わない。
• popover や dialog のように display: none を行き来する要素では、@starting-style で popover を display:none からフェードイン の @starting-style と transition-behavior: allow-discrete も合わせて使う。
• prefers-reduced-motion: reduce のときは transition を短くするか無くす。

出典

• @nexvyn · 2026-10-31