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