@starting-style display: none からのアニメーションが、JSのタイミングハックなしで可能になりました。
左が従来の実装、右が @starting-style を使った実装です。
display: none → block
アニメーションなし
@starting-style で
opacity + transform をトランジション
突然現れて突然消える
ユーザーが見逃しやすい
右からスライドイン
退場もスムーズにアニメーション
瞬間的に出現
安っぽい印象になりがち
上から降りてくる自然な動き
CSS数行で実現