CSS @starting-style完全解説！display:noneからのフェードアニメーションを脱JavaScriptで実現

Web制作やフロントエンド開発でモーダルダイアログ（<dialog>）やポップオーバー、アコーディオンメニューを作るとき、誰もが一度は以下の問題で頭を抱えたことがあるはずです。

「display: none; から display: block; に切り替えた瞬間、CSSの transition: opacity 0.3s; が効かずにパッと一瞬で現れてしまう……」。これまでのCSSでは、離散的（discrete）なプロパティである display にアニメーションを適用できず、JavaScriptでクラスを2段階に分けて付与したり setTimeout を噛ませる泥臭い回避策が必須でした。

しかし、モダンCSSの新標準「@starting-style」ルールと「transition-behavior: allow-discrete」の登場により、この長年の悲願がついに完全解決しました。JavaScriptを一切使わず、純粋なCSSだけで要素の「出現時」と「消滅時」のスムーズなアニメーションが書けるようになったのです。

1. なぜこれまでのCSSではフェードインできなかったのか？

従来のブラウザレンダリングエンジンは、要素が display: none（DOMツリー上は存在しても描画ツリーに載っていない状態）から display: block に変わった際、「変化前のスタイル（opacity: 0など）」のスナップショットを持っていませんでした。

そのため、ブラウザは「最初から opacity: 1 の状態で描画された」と判定し、アニメーションの開始地点（始点）が存在しないため即座に表示されてしまっていたのです。

Webコンポーネントの設計やモダンなUIライブラリの型定義を学ぶ際は、TypeScript関連書籍を参考にしながら、DOM操作を最小限に抑えたクリーンなアーキテクチャを目指すのが現代の王道です。

2. @starting-style と allow-discrete の基本構文

新仕様では、次の2つのプロパティを組み合わせるだけで完璧に動作します。

• 🎨@starting-style：要素が初めて描画ツリーに現れる「直前の初期スタイル（始点）」を定義する。
• ⏳transition-behavior: allow-discrete：display や overlay などの離散プロパティのアニメーション遅延（transitionの完了までdisplayの切り替えを待つ）を許可する。

dialog[open] {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out, display 0.3s allow-discrete;

  /* 要素が表示される瞬間の初期スタイルを定義 */
  @starting-style {
    opacity: 0;
    transform: scale(0.9);
  }
}

/* 閉じる時の消滅アニメーション */
dialog {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.3s ease-in, transform 0.3s ease-in, display 0.3s allow-discrete;
}

夜間のコーディング作業や長時間のCSS調整・デザイン検証では、画面への光の映り込みを防ぎながら手元を均一に照らしてくれるBenQ等のモニター掛け式LEDライトバーがあると、目の疲れが驚くほど軽減されます。

3. 従来手法との比較とブラウザ対応状況

従来のJavaScriptアニメーション手法と @starting-style の比較は以下の通りです。

一日中デスクに向かってUIデザインやフロントエンド開発に集中するなら、座りっぱなしを防いで集中力を維持できるエルゴノミクス 電動昇降デスクを導入して、定期的に立ち作業を取り入れるのが健康的でおすすめです。

まとめ

@starting-style と transition-behavior: allow-discrete は、「なぜ今までできなかったのか」と言いたくなるほど直感的で美しいWeb標準の進化です。

現在では主要なモダンブラウザすべてで利用可能（Baseline）となっており、本番サイトでも安心して導入できます。ダイアログやメニュー、トースト通知などのUIを作成する際は、ぜひ脱JavaScriptの軽快なCSSアニメーションを試してみてください。