CSS Scroll-Driven Animations 完整教學：不用 JavaScript 也能做出專業捲動動畫

等了好久，CSS 終於有原生的捲動驅動動畫了！以前要做捲動動畫，不是用 IntersectionObserver 自己刻，就是得靠 GSAP ScrollTrigger 這類函式庫。現在透過 scroll-timeline 和 view-timeline，純 CSS 就能搞定大部分的捲動動畫需求。

原生 CSS 捲動動畫時代正式來臨

CSS Scroll-Driven Animations 是 CSS 最讓人興奮的新功能之一。它讓你可以把 CSS Animation 的時間軸從「時間」改成「捲動進度」，不需要任何 JavaScript。如果你已經熟悉 CSS @property 自訂屬性動畫的概念，接下來會更容易理解。

scroll-timeline：用捲動進度驅動動畫

匿名 Scroll Timeline 快速上手

.progress-bar {
  animation: grow-width linear;
  animation-timeline: scroll();
}
@keyframes grow-width {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

就這樣！不需要 JavaScript，進度條就會隨著頁面捲動而變長。

具名 Scroll Timeline 進階控制

當你需要綁定特定的捲動容器時，用具名 timeline：

.scroll-container {
  scroll-timeline-name: --main-scroll;
  scroll-timeline-axis: block;
}
.animated-element {
  animation: fade-slide linear;
  animation-timeline: --main-scroll;
}

view-timeline：元素進入視窗時觸發動畫

View Timeline 是做「元素進場動畫」的神器：

.card {
  animation: slide-up linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 100%;
}

以前要做這件事，你需要 IntersectionObserver + JavaScript class toggle + CSS transition。現在三行 CSS 搞定。

用 animation-range 精準控制觸發範圍

View Timeline 有幾個預定義的範圍：entry、exit、contain、cover。更多 CSS 新功能可以看 CSS Mixins 原生混入教學。

實戰：閱讀進度條

.reading-progress {
  position: fixed; top: 0; left: 0; width: 100%; height: 3px;
  background: linear-gradient(to right, #6366f1, #8b5cf6);
  transform-origin: left;
  animation: progress-grow linear;
  animation-timeline: scroll(block root);
}

實戰：卡片進場動畫

.card {
  animation: card-enter ease-out both;
  animation-timeline: view();
  animation-range: entry 10% entry 90%;
}
@keyframes card-enter {
  from { opacity: 0; transform: translateY(60px) scale(0.95); filter: blur(4px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

實戰：純 CSS 視差效果

透過不同元素設定不同的位移量，就能做出層次分明的視差效果。相關的佈局技巧可以參考 CSS Masonry 瀑布流佈局教學。

實戰：Header 滾動收縮

animation-range 也可以接受絕對像素值，不只是百分比。這在做 header 動畫時特別實用。

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

截至 2026 年 3 月：Chrome 115+ 完整支援、Edge 115+ 完整支援、Firefox 130+ 部分支援、Safari 18.2+ 基本支援。漸進增強用 @supports (animation-timeline: scroll())。

CSS Scroll-Driven vs GSAP ScrollTrigger：怎麼選？

簡單效果用原生 CSS，複雜互動用 GSAP。兩者不衝突，可以混著用。想了解更多 CSS 前沿功能，看看 CSS Anchor Positioning 教學。

結語

CSS Scroll-Driven Animations 真的是近年來 CSS 最重大的進化之一。它讓很多以前需要 JS 的效果變成純宣告式，建議大家現在就開始學起來，搭配漸進增強策略在實際專案中使用。