CSS @starting-styleの使い方｜display:noneから開く動きを実演

@starting-styleは、要素が初めて表示される瞬間の開始スタイルを定義するCSSです。従来は遷移しにくかったdisplay: noneからの表示や、Popover・dialogがtop layerへ入る瞬間に、自然なフェードと移動を付けられます。

情報確認日：2026年8月20日

結論：開始値は@starting-style、離散状態はallow-discrete

Popoverを開閉して開始スタイルを確認する

なぜ従来はdisplay:noneから遷移できなかったのか

transitionには変更前と変更後の計算済みスタイルが必要です。しかしdisplay: noneの要素は描画されず、表示された最初のstyle updateでは比較する前の値がありません。@starting-styleはその開始値を与えます。

またdisplayは連続的な数値ではなく離散プロパティです。これをtransitionの時間に含めるにはtransition-behavior: allow-discrete、または短縮記法の各項目へallow-discreteを指定します。

通常要素の最小例

.notice {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 200ms, transform 200ms;
}

@starting-style {
  .notice {
    opacity: 0;
    transform: translateY(0.75rem);
  }
}

DOMへ後から追加された要素や、以前レンダリングされていなかった要素が最初に描画されるとき、starting styleから通常スタイルへ遷移できます。同じ要素を表示したままクラス変更する通常のtransitionでは、必須ではありません。

Popoverで開閉の両方向を作る

.notice-popover {
  opacity: 0;
  transform: translateY(0.75rem) scale(0.96);
  transition:
    opacity 200ms,
    transform 200ms,
    display 200ms allow-discrete,
    overlay 200ms allow-discrete;
}

.notice-popover:popover-open {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@starting-style {
  .notice-popover:popover-open {
    opacity: 0;
    transform: translateY(0.75rem) scale(0.96);
  }
}

閉じた通常状態を透明にし、開いた状態を不透明にします。displayとoverlayを時間中に維持することで、閉じる途中で要素が即座に消えるのを防ぎます。

入れ子記法と独立記法

CSS nestingを使える構成なら、ルール内へ@starting-styleを入れて関連を近づけられます。一方、ビルドツールや既存の記述規約との互換性を優先するなら、前の例のような独立ブロックが読みやすい場合があります。

.toast {
  opacity: 1;
  transition: opacity 180ms;

  @starting-style {
    opacity: 0;
  }
}

@keyframesとの使い分け

@starting-styleはアニメーション全般の代替ではありません。「遷移前の計算済みスタイルが存在しない」という穴を埋めるものです。

動かないときの確認項目

1. 通常状態にtransitionが指定されているか
2. starting styleと通常状態に差があるか
3. display等へallow-discreteを指定したか
4. セレクターの詳細度と記述順で上書きされていないか
5. ブラウザ対応とprefers-reduced-motionを確認したか

開始スタイルのルールは、同じ詳細度なら通常ルールより後に置くのが安全です。CSS Modulesやminifierを通す場合は、生成後CSSでも順序を確認します。

未対応環境の考え方

未対応ブラウザでは、開始スタイルが無視され、要素がアニメーションなしで表示されます。これを正常なフォールバックにできるよう、可視性や操作可能性をアニメーションへ依存させないでください。演出が必須要件ならJavaScript animationを検討しますが、通常の通知やPopoverでは瞬時表示で十分です。

よくある質問

まとめ

@starting-styleは、初回表示に足りなかった「変更前の値」をCSSへ与えます。通常状態、開始状態、transitionを分け、displayやtop layerをまたぐ場合はallow-discreteを追加してください。未対応時は瞬時表示できることを成功条件にします。

関連記事

• CSSアニメーションの基本
• CSSローディングアニメーション例
• ScrollRevealの使い方

参照した公式資料

• MDN：@starting-style
• MDN：transition-behavior
• CSSWG：CSS Transitions Level 2