靜態行銷頁與文件站仍常見捲動視差、閱讀進度列與章節進場動畫；傳統做法仰賴 scroll 事件、IntersectionObserver 與 requestAnimationFrame，除了增加套件體積，也在行動版 Safari 更容易出現掉幀。CSS 捲動驅動動畫（scroll-timeline、animation-timeline、檢視時間軸 view()）把捲動進度映射到關鍵影格的工作交給合成器，對 Eleventy、Hugo、Astro 靜態輸出等「一次編譯」流程特別划算。若你需要整頁過渡與共享元素連續性，請同步閱讀 View Transitions 與靜態多頁站；在提交 WebKit 問題單前，也請先對照 Safari Technology Preview 與穩定版差異，確認缺陷並非渠道限定。
靜態站為何需要時間軸
命令式捲動程式常在讀取幾何資訊時觸發同步版面配置；字體延遲載入又會改變文件高度，使手算進度失真。於樣式表宣告時間軸，瀏覽器能在條件允許時把動畫排程到合成執行緒，降低主執行緒抖動。對必須交付合規證明的團隊而言，邊界也更清楚：捲動進場、淡入淡出屬於時間線；購物車抽屜、同意橫幅與分析仍屬 JavaScript。
2026 年初公開文件站仍觀察到約 5–8% 桌面工作階段落在不完整支援 scroll-timeline 的組合上——足以要求漸進增強，卻也常讓行銷堅持要動效。請準備靜態降級：不支援時維持不透明與單位矩陣，而非再引入第二套動畫執行環境。
scroll-timeline 與檢視時間軸
捲動時間軸綁定某個捲動容器的捲動距離；檢視時間軸則描述目標在捲動口中的可見比例，適合「區塊進入視野才上浮」這類過去要為每個區塊註冊觀察者的互動。搭配 animation-range，可把「哪一段捲動距離」對應到 0%–100% 關鍵影格，並由排版系統在字型或圖片替換後維持一致。
無障礙上務必處理 prefers-reduced-motion: reduce：使用者選擇減少動態效果時，內容仍須可讀且對比充足，不可停在半透明或位移中的過渡狀態。
最小範例
.reveal {
animation-name: fade-slide;
animation-duration: 1s;
animation-timing-function: linear;
animation-timeline: view();
animation-range: entry 0% cover 40%;
}
@keyframes fade-slide {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}多個章節共用 class 時，各元素會取得獨立檢視時間軸實例，省去逐一配置 data-* 的_observer 樣板程式。若要製作整頁閱讀列，可改綁根捲動並拉滿 animation-range。
瀏覽器矩陣
| 引擎 | 捲動聯動動畫 | 靜態 QA 備註 |
|---|---|---|
| Chromium | 成熟 | DevTools 可 scrub 時間軸。 |
| Firefox | 支援（核對版本） | 對照規格檢查 view 範圍。 |
| Safari 穩定版 | 新系統可用 | 小版本可能改變捲動條與彈性回彈。 |
| 舊行動 WebKit | 常不完整 | @supports 與減弱動效必備。 |
標準演進期間草案屬性與別名並存，請在內部維護「建置鏈實際輸出」清單，避免文件與壓縮後 CSS 不一致。
若頁面同時使用 position: sticky 與捲動時間軸，請特別檢查標題列與側欄在 Safari 的層疊上下文；某些情況下合成層提升順序與 Chromium 不同，會讓「看起來像動畫卡頓」其實是 z-index 與 overflow 裁剪互動。以最小可重現範例（minimal repro）餵給 QA，比在聊天室描述「有時候會抖」節省一半來回時間。
靜態產線也可在 CI 跑基本語法檢查與 gzip 體積回歸：時間線相關屬性重複出現時，字典壓縮通常表現良好，但若誤把實驗性前綴留在不同檔案，壓縮比會突然變差，間接暴露分支合併錯置。
Safari 清單與雲端 Mac
Linux CI 無法完整模擬 WebKit 在文件尾端彈性 overscroll 的合成排程，也難 1:1 對齊系統字體次像素。建議每週 30–45 分鐘 Apple 真機：穩定版簽核、STP 追迴歸。清單含：PR 附 Safari 版號、100%/125%/150% 縮放、巢狀 overflow:auto、列印樣式不得殘留半透明。
採購受阻時可短期租用 Apple Silicon Mac mini，SSH 佈署、VNC 操作 Safari，日均約 $16.9/天。試驗實驗旗標前先快照磁碟，避免偏好設定損毀拖累下一輪驗收。
預覽環境請鏡像正式站 Content-Security-Policy 與字型網域；捲動動效會放大行高不一致造成的「頓點」，即便根因僅為延遲載入的字型。
團隊可要求每次改動捲動時間線的合併請求附上 30–60 秒螢幕錄影：同一 URL 在 Chromium 與 Safari 並列捲動，並註明建置工具版本與壓縮 CSS 雜湊，方便支援判斷是 WebKit 小改版、CSP，還是 CMS 注入內聯樣式破壞了時間軸作用域。
對跨國團隊而言，把 Safari 驗收時段固定在週二或週四（配合雲端機房維護窗口）可减少「剛好遇到宿主維護」的假陽性；若租用的 Mac mini 會被快照還原，請在 runbook 註明還原後要重新匯入憑證與信任憑證鏈，否則健康檢查 URL 的 TLS 錯誤會被誤判成動畫迴歸。
常見問題
CSS 捲動驅動動畫能完全取代 JavaScript 捲動監聽嗎？
無法取代所有情境。純視覺捲動效果可交給時間軸；分析、複雜手勢與狀態同步仍需要 JavaScript。CSS 負責呈現，JS 負責行為與資料。
2026 年 Safari 對 scroll-timeline 的支援要注意什麼？
請以 caniuse、WebKit 發行說明與目前 STP／穩定版為準逐版核對；舊版 iOS WebKit 可能不完整，需要 @supports 降級。
沒有實體 Mac 能驗準捲動動畫嗎？
自動化 WebKit 冒烟有助益，但彈性捲動、字體彩現與合成器排程與實機仍有差異；建議每週留 30–45 分鐘實機或租用雲端 Mac mini 以 VNC 目視驗收。
Mac mini 仍是 WebKit 捲動與字體的實務基準：Apple Silicon 熱量低、可長時間開啟 Safari 做迴歸。MacHTML 提供 SSH／VNC 裸機租用，衝刺期拉起環境、錄影存證、驗畢即釋放，無需新增固定資產採購。