2026年10月27日釋出的Firefox 159預設啟用CSS捲動驅動動畫(scroll-driven animations)，加上早已支援的Chrome 115與Safari 26，這項功能正式成為Baseline「新近可用」。也就是說，捲動動畫現在不必依賴JavaScript捲動監聽或第三方函式庫，用幾行CSS就能在主流瀏覽器跑起來。真正的課題變成：什麼地方該動、動多少、誰可以選擇不要動。
捲動驅動動畫是什麼？跟以前的捲動特效差在哪？
它把動畫的「時間軸」從秒數換成捲動位置。過去我們做閱讀進度條、區塊淡入或視差，多半要寫scroll事件或IntersectionObserver，再搭配動畫套件；現在用animation-timeline指定scroll()(跟著容器捲動進度)或view()(跟著元素進出畫面)，再用animation-range決定從哪裡開始、到哪裡結束。
對我們來說，差別不只是少寫程式。宣告式的寫法讓設計稿上的「進場節奏」可以直接變成一組可重用的CSS規則，交接時也比較不會因為各頁各自實作而走樣。
捲動動畫適合用在哪些地方？
結論是：拿來「說明狀態」，比拿來「表演」更有價值。我們在品牌網站與大型系統裡，會優先考慮這幾種用法：
- 閱讀與流程進度：長篇政策說明、線上申請的多步驟頁面，用細進度條告訴使用者「還剩多少」。
- 固定頁首的收合：捲動後縮小頁首、保留主要操作，讓後台表單或報表有更多可視空間。
- 內容進場的輕提示：品牌官網的作品區、時間軸，用短距離淡入引導視線，而不是整塊飛入。
- 資料區塊的層次：儀表板或長表格捲動時，讓凍結欄位或區塊標題出現陰影，提示「下面還有內容」。
捲動動畫會不會讓使用者頭暈？無障礙要怎麼顧？
會，而且大幅位移、縮放與視差最容易出問題。WCAG 2.3.3「互動觸發的動畫」雖屬AAA等級，但它點出的需求很實際：由使用者操作觸發的非必要動態，應該能被關閉。WebKit官方指南也建議把捲動動畫包在prefers-reduced-motion媒體查詢裡，只對沒有要求減少動態的使用者啟用。
動畫應該跟著內容的意思走，而不是跟著捲軸表演。
我們的做法是「先寫靜態版、再加動態」：預設畫面就是完整可讀的狀態，動畫只是疊上去的增強層。這樣不論瀏覽器支援與否、使用者是否關閉動態，資訊都不會缺。
設計系統裡，捲動動畫要怎麼規範？
把動態當成設計token管理，而不是逐頁自由發揮。在KYART光沅創意參與的大型內部系統與多站群官網專案中，我們會在設計系統裡先定義這幾件事：
- 動態等級：例如「無」「微」「標準」三級，後台作業頁預設只用「微」，品牌形象頁才開放「標準」。
- 允許的屬性：優先使用opacity與transform，避免動到會觸發版面重排的width、top等屬性。
- 位移與範圍：進場位移控制在小距離內，
animation-range統一寫在共用元件，不讓每頁各自調。 - 降級規則：減少動態模式下直接呈現最終狀態，並列入UI驗收清單逐項檢查。
這樣設計師在Figma標註的是「這個元件用微動態」，前端拿到的是對應的class，雙方講的是同一套語言，後續雲端代管維運時要調整，也只需要改一處。
舊專案要不要把JavaScript捲動特效全部換掉？
不必一次全換，建議跟著改版或維運排程分批替換。原本用捲動監聽做的進度條、頁首收合，是最適合先換成CSS的項目，可以減少腳本量；牽涉複雜編排或需要精準控制的互動，則可以先保留既有套件，等測試完整再評估。替換時用@supports判斷支援度，舊版瀏覽器仍能看到完整的靜態畫面。
常見問題
Q：捲動驅動動畫現在主流瀏覽器都能用嗎？
A：依web.dev 2026年10月的整理，Chrome 115、Edge 115、Safari 26與Firefox 159起皆支援，已達Baseline新近可用；仍在使用舊版瀏覽器的使用者，應該看到不帶動畫的完整畫面。
Q：捲動動畫會影響SEO或效能嗎？
A：只要文字本來就寫在HTML裡、不是靠動畫才載入，動畫本身不影響內容被索引。效能上，以opacity與transform為主的動畫負擔較低，通常也比自行監聽scroll事件更好維護。
Q：後台系統也需要捲動動畫嗎？
A：需要的是「回饋」而不是「特效」。凍結欄位的陰影、頁首收合這類細微提示，能幫助每天長時間操作的使用者掌握位置，其他裝飾性動態建議省略。
工具變簡單之後，難的就只剩判斷。捲動動畫成為Baseline，讓「能不能做」不再是問題；我們更在意的是，畫面上每一個會動的地方，都說得出它為什麼要動。
參考資料：
New to the web platform in October(web.dev)
Firefox 159 release notes for developers(developer.mozilla.org)
Scroll-driven animations(MDN)
A guide to Scroll-driven Animations with just CSS(webkit.org)
Understanding SC 2.3.3: Animation from Interactions(w3.org)
