Newly available 条件付きOK。Chrome 117+・Safari 17.5+・Firefox 129+・Edge 117+ で利用可能。

@starting-style

@starting-style は CSS のアットルールで、トランジションさせる要素に設定されるプロパティ群の開始値を定義するために使用します。これらのプロパティは、最初に要素のスタイルが更新されたとき、つまり要素が前回読み込まれたページに最初に表示されたときに設定されるものです。

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

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
@starting-style
117
117
129
17.5
117
17.5
DOM API
CSSStartingStyleRule

CSSStartingStyleRule は CSS オブジェクトモデルのインターフェイスで、 CSS の @starting-style アットルールを表します。
117
117
129
17.5
117
17.5
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

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);
  }
}

ライブデモ

fade ineffect

@starting-style fade ineffect demo.

プレビュー全画面表示

ske-lineffect

@starting-style ske-lineffect demo.

プレビュー全画面表示

slide ineffect

@starting-style slide ineffect demo.

プレビュー全画面表示

実務での使いどころ

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

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

  • 通知トーストの表示

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

注意点

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

フォールバック戦略

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

アクセシビリティ

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

参考リンク