💡 文章重點摘要：想做出流暢的網頁捲動動畫與進度條，別再引入肥大的 JS 套件了！本文帶你深入認識現代純 CSS 的 Scroll-driven Animations 技術，透過原生
animation-timeline與scroll()、view()屬性，不需監聽scroll事件即可打造 60fps 極致流暢的滾動特效，大幅提升網站載入效能與使用者體驗。
在過去，想要在網頁上實現「滾動視差」、「捲動進度條」或是「流暢的頁面轉場動畫」，我們往往得毫不猶豫地引入 GSAP、Framer Motion 或 ScrollMagic 等肥大的 JavaScript 函式庫。然而，隨著 W3C 規範與現代瀏覽器的快速演進，CSS 已經迎來了史詩級的更新。今天，我們將帶領各位前端開發者，解鎖如何用純 CSS 與極少量的原生 API，打造出媲美原生 App 的極致流暢體驗！
⚡ 快速跳轉（依實務情境選擇）：
1. 原生 animation-timeline：無須 JS 監聽的捲動進度動畫實作
現代 CSS 的核心解法是利用 animation-timeline 屬性，搭配 scroll() 函式，將動畫進度直接綁定到容器的捲動進度上。以下是 3 秒鐘即可套用的核心標準語法：
/* 核心標準語法：將動畫綁定至捲動進度 */
.target-element {
animation: your-animation-name auto linear;
animation-timeline: scroll(); /* 預設綁定至最近的捲動父容器 */
}範本一：頂部閱讀進度條
我們不需要寫任何一行 JS 監聽 scrollTop，只需要以下簡單的 CSS 即可達成 60fps 的流暢度：
.progress-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 8px;
background-color: #0070f3;
transform-origin: left;
/* 1. 綁定自訂動畫 */
animation: grow-progress auto linear;
/* 2. 將時間軸綁定到 root 視窗捲動 */
animation-timeline: scroll(root);
}
@keyframes grow-progress {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}範本二：元素進入視窗時淡入（Fade-in on scroll）
若要實作「當某個區塊滾動到畫面中時才觸發動畫」，應使用 view() 函式：
.card {
opacity: 0;
transform: translateY(50px) scale(0.9);
animation: fade-in-up auto linear forwards;
/* 關鍵：當此元素進入 Viewport 時觸發 */
animation-timeline: view();
/* 調整觸發區間：進入視窗 10% 開始，40% 時完成 */
animation-range: entry 10% entry 40%;
}
@keyframes fade-in-up {
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}2. 跨頁轉場神器：View Transitions API 打造如原生 App 的流暢切換
在單頁式應用（SPA）中，現在 Chrome 與 Safari 原生支援了 View Transitions API，讓我們可以用極簡語法實現「魔術傳送門（Hero Transition）」效果。
實戰範例：卡片點擊展開
我們只需要在 CSS 中為目標元素指定一個全域唯一的 view-transition-name：
/* 列表頁與詳細頁的對應元素使用相同名稱 */
.avatar {
view-transition-name: hero-avatar;
}接著，在 JavaScript 中執行 DOM 更新時，用 startViewTransition 包裹：
function navigateToDetail() {
if (!document.startViewTransition) {
updateDOMToDetailPage();
return;
}
// 啟動原生轉場，瀏覽器會自動計算位移與縮放動畫
document.startViewTransition(() => {
updateDOMToDetailPage();
});
}3. 原生彈出視窗與對話框：Popover API 搭配 @starting-style 動態過渡
Popover API 解決了 z-index 層級遮擋痛點，讓元素直接渲染在「頂層（Top Layer）」。配合全新的 @starting-style，可以解決 display: none 無法做動畫的陳年問題。
完整程式碼範本
<!-- 觸發按鈕 -->
<button popovertarget="my-popover">打開選單</button>
<!-- 彈出視窗主體 -->
<div id="my-popover" popover>
<h3>這是原生 Popover！</h3>
<p>按 Esc 或點擊外部會自動關閉。</p>
</div>/* 1. 定義基礎樣式與過渡效果 */
[popover] {
opacity: 0;
transform: translateY(-20px);
transition:
opacity 0.4s ease,
transform 0.4s ease,
display 0.4s allow-discrete,
overlay 0.4s allow-discrete;
}
/* 2. 定義開啟狀態 */
[popover]:popover-open {
opacity: 1;
transform: translateY(0);
}
/* 3. 定義進場瞬間的起點狀態（修正截斷處） */
@starting-style {
[popover]:popover-open {
opacity: 0;
transform: translateY(-20px);
}
}
/* 4. 背景遮罩動畫 */
[popover]::backdrop {
background-color: rgba(0, 0, 0, 0);
transition: background-color 0.4s allow-discrete, display 0.4s allow-discrete;
}
[popover]:popover-open::backdrop {
background-color: rgba(0, 0, 0, 0.5);
}4. 效能重構比較：減少 40% JS 打包體積的實際成效分析
將動畫重構為原生方案後，除了減少套件依賴，最大的收益在於提升 RWD 新手教學 中強調的行動端流暢體驗。
| 指標 | 重構前 (GSAP + ScrollMagic) | 重構後 (原生 CSS) | 改善幅度 |
|---|---|---|---|
| JS Bundle 大小 | 185 KB (Gzipped) | 110 KB (Gzipped) | 減少約 40.5% |
| LCP (最大內容繪製) | 2.4 秒 | 1.6 秒 | 縮短 33% |
| TBT (總阻塞時間) | 180 毫秒 | 15 毫秒 | 優化 91.6% |
| 滾動影格率 | 45 ~ 55 fps (偶有掉幀) | 穩定 60 fps | GPU 加速 |
5. 常見問題（Q&A）與排錯技巧
Q1：為什麼我的 animation-timeline: scroll() 沒有反應？
解法：請檢查父容器是否設定了正確的 overflow。scroll() 需要一個可捲動的容器（如 overflow-y: auto 或 scroll）。若父元素高度被撐開但沒有 overflow 設定，動畫將無法偵測到捲動進度。
Q2：如何處理 Safari 或 Firefox 不支援的問題？
解法：目前可使用 Scroll-driven Animations Polyfill 進行相容性補完，或利用 @supports 進行漸進式增強：
@supports not (animation-timeline: scroll()) {
/* 針對不支援瀏覽器的替代樣式 */
.progress-bar { width: 100%; }
}Q3：可以實作「橫向捲動」的動畫嗎？
解法：可以，只需在 scroll() 函式中指定 axis 參數：
animation-timeline: scroll(axis: x);Q4：view-transition-name 失效的原因？
解法：該名稱在同一個畫面上必須是唯一的。如果在列表（List）中使用，請務必透過 inline style 動態生成唯一 ID，例如 style="view-transition-name: card-123"。
Q5：原生 CSS 動畫真的能完全取代 GSAP 嗎？
解法：對於基礎的滾動進度、淡入淡出、簡單位移，原生 CSS 效能更佳。但若涉及複雜的「時間軸序列控制（Timeline Sequencing）」或「SVG 路徑動畫」，GSAP 仍具備不可取代的工具鏈優勢。
參考資料與延伸閱讀
- MDN Web Docs: CSS scroll-driven animations – 官方完整 Scroll-driven 動畫規格與指南
- W3C Working Draft: Scroll-driven Animations Module Level 1 – W3C 官方規範文件
- Chrome for Developers: Animate elements on scroll with Scroll-driven animations – Chrome 團隊實務教學與互動展示
- MDN Web Docs: View Transitions API – 跨頁與單頁無縫轉場 API 規格
- MDN Web Docs: Popover API – 原生頂層彈窗與對話框規格
- MDN Web Docs: @starting-style – 元素進出場離散轉場動畫規格
- Can I Use: CSS Scroll-driven Animations – 全球各主流瀏覽器支援度即時查詢
- Can I Use: View Transitions API – 全球各主流瀏覽器支援度即時查詢
發表迴響