要素が最初に表示された瞬間の「開始スタイル」を定義するアットルールです。display: noneからの表示やDOM追加直後の要素に、JavaScriptなしでフェードインなどの出現アニメーションを付けられます。transition-behavior: allow-discreteとの併用が定番です。
@starting-style { <declarations> } / 要素側: transition-behavior: allow-discretedialog[open] {
opacity: 1;
transition: opacity 0.3s, display 0.3s allow-discrete, overlay 0.3s allow-discrete;
@starting-style {
opacity: 0;
}
}
dialog {
opacity: 0;
}ダイアログの開閉両方向をCSSだけでフェード
.toast {
opacity: 1;
translate: 0 0;
transition: opacity 0.3s, translate 0.3s;
@starting-style {
opacity: 0;
translate: 0 12px;
}
}DOMに追加されたトースト通知が下からフェードイン
display: noneからのtransitionにはtransition-behavior: allow-discrete（transitionショートハンドではallow-discreteキーワード）が必要です。popover/dialogの出現・消滅アニメーションはこの組み合わせ＋overlayプロパティで完全にCSS化できます。
@starting-styleは「表示された瞬間」の起点なので、消えるとき（表示→非表示）のアニメーションには効きません。消える方向は通常のtransition＋allow-discreteで実装します。またキャッシュされた再表示など、レンダリング済み要素には適用されません。
AIは「display: noneからフェードイン」の要望にJavaScript（クラス付替え+requestAnimationFrame）やkeyframesハックを提案しがちですが、2024年以降は@starting-style + transition-behavior: allow-discreteでCSSのみで実装できます。AIの生成コードでallow-discreteが抜けてdisplayが補間されず動かない、というのが最頻の失敗パターンです。
popover要素の出現・消滅に@starting-styleとallow-discreteを使ったフェードアニメーションを付けて。JSは使わない
JSでクラスを付け替えてフェードインしているこのコードを、@starting-styleベースのCSSだけの実装に書き換えて
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。