JavaScriptなしで「要素が追加された瞬間」にアニメーションする最新手法。トースト通知や動的リストの定番になりつつあります。
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
@starting-styleは「要素が最初にレンダリングされる瞬間のスタイル」を定義するアットルールです。通常のtransitionは状態変化がないと動きませんが、これによりDOM追加直後（=初回描画）を起点にした遷移が可能になります。従来はJSでクラスを1フレーム後に付け替えるハックが必要だった処理が、CSSだけで完結します。
display: noneからの表示に使う場合はtransition-behavior: allow-discreteの併用が必要です。詳細は@starting-styleのページを参照してください。
JSで追加した要素が、DOMに挿入された瞬間にフェードインするようにして。@starting-styleとtransitionで実装して、JSでクラス付け替えはしないで。
@starting-styleが非対応のブラウザでも表示が壊れないように、フォールバックを考慮して。
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。