Newly available 条件付きOK。Chrome 117+・Safari 17.5+・Firefox 129+・Edge 117+ で利用可能。
アニメーション Newly available

@starting-style

display: none から表示される要素にトランジションを適用するのは従来不可能だった。@starting-style を使うと、要素の出現時の初期スタイルを定義でき、CSSトランジションで自然な出現アニメーションが実現する。ダイアログやポップオーバーの表示演出に特に有用。

アニメーショントランジション

概要

display: none から表示される要素にトランジションを適用するのは従来不可能だった。@starting-style を使うと、要素の出現時の初期スタイルを定義でき、CSSトランジションで自然な出現アニメーションが実現する。ダイアログやポップオーバーの表示演出に特に有用。

対応ブラウザ

デスクトップ

Chrome 117+
Edge 117+
Safari 17.5+
Firefox 129+

モバイル

Chrome Android 117+
Safari iOS 17.5+
Firefox Android 129+

基本構文

CSS 
dialog[open] {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

@starting-style {
  dialog[open] {
    opacity: 0;
    transform: scale(0.9);
  }
}

実務での使いどころ

  • ダイアログの出現アニメーション

    dialog 要素が開く際にフェードイン＋スケールアップのアニメーションを適用する。

  • 通知トーストの表示

    動的に追加される通知要素にスライドイン演出を付ける。

注意点

  • transition-behavior: allow-discrete と併用が必要な場合がある（display の遷移など）。

フォールバック戦略

CSS 
/* @starting-style 非対応ブラウザ向け: JSでクラス付与によるフォールバック */
dialog[open] {
  opacity: 1;
}
dialog.is-entering {
  opacity: 0;
}

アクセシビリティ

  • 出現アニメーションは prefers-reduced-motion で無効化できるようにする。

参考リンク