display: none の表示・非表示もCSSでアニメーションできる

どんな問題を解決するか / いつ使うか

モーダル、ポップオーバー、ドロップダウンを、JSなしでふわっと出したい・消したいとき。

やり方

.panel {
  transition: opacity .2s, display .2s allow-discrete;
  opacity: 1;
}
.panel[hidden], .panel.is-closed {
  display: none;
  opacity: 0;
}
@starting-style {          /* 表示された直後の開始状態 */
  .panel { opacity: 0; }
}

• transition-behavior: allow-discrete（上の allow-discrete）で、display の切り替えをトランジションの最後まで遅らせる。
• @starting-style で、表示された直後の開始状態を指定する。

注意点・対応状況

• 投稿は「アニメーション可能になった」という一言のみ。コードは一般的な実装方法を補ったもの。ブラウザの対応状況を確認する。

出典

• 投稿者: @Koots2021 (くーつ＠WordPressサイトの保守管理)
• 投稿: @Koots2021 · 2026-04-15
• 投稿日: 2026-04-15（JST）
• 収集日: 2026-10-09（JST）