Baseline 2024

CSS @starting-style

display: none からのアニメーションが、JSのタイミングハックなしで可能になりました。 左が従来の実装、右が @starting-style を使った実装です。

01

モーダル

Before instant
After fade + scale

display: none → block
アニメーションなし

@starting-style で
opacity + transform をトランジション

💾
変更を保存しますか？
保存していない変更があります。このまま離れると、変更内容が失われます。
02

トースト通知

Before instant
保存しました
ファイルが正常に保存されました。
After slide-in
保存しました
ファイルが正常に保存されました。

突然現れて突然消える
ユーザーが見逃しやすい

右からスライドイン
退場もスムーズにアニメーション

03

ドロップダウンメニュー

Before instant
After fade + slide

瞬間的に出現
安っぽい印象になりがち

上から降りてくる自然な動き
CSS数行で実現