CSS @starting-style 入門攻略：原生進場動畫不再需要 JavaScript

那些年我們為了進場動畫寫過的 Hack

做前端一定都有過這經驗：想讓 modal 有淡入效果，設定了 opacity transition，結果打開時完全沒動畫。因為瀏覽器在元素首次渲染時 transition 不會觸發。我們發明了各種 workaround：setTimeout、requestAnimationFrame 雙重巢狀。CSS @starting-style 就是徹底解決這問題。

@starting-style 語法全解析

語法簡潔，用 @starting-style 定義元素即將進場的初始樣式。當元素被加入 DOM 或從 display: none 變可見，瀏覽器先套用 @starting-style 樣式，然後自動過渡。零 JavaScript。搭配 transition-behavior: allow-discrete 讓 display 也能被動畫化。

瀏覽器支援度與漸進增強策略

Chrome 117+、Edge 117+、Safari 17.5+、Firefox 129+ 都支援，全球覆蓋率超 90%。不支援的瀏覽器元素直接出現，功能不受影響——天然優雅降級。延伸閱讀：CSS light-dark() 原生主題切換。

六個實用的進場動畫模式

• Toast 通知：translateX(100%) 從右滑入
• 下拉選單：clip-path 展開
• 圖片燈箱：scale(0.8) + opacity: 0
• 側邊欄：translateX(-100%) 從左推入
• 卡片列表：依序淡入 + animation-delay
• Popover API：搭配原生 Popover API 最佳

退場動畫怎麼做？

搭配 overlay 屬性。對 top-layer 元素設定 transition: overlay 0.3s allow-discrete，結合退場狀態選擇器。頁面級過渡動畫可參考 CSS 跨文件 View Transitions 教學。

從 JavaScript 動畫遷移到 @starting-style

漸進式遷移：純粹進場動畫（modal、toast、dropdown）改用 @starting-style。保留需要動態參數或複雜時間軸的在 JS。@starting-style 動畫由瀏覽器合成器處理，主線程繁忙時不掉幀。