| 前言

在 2023 Google I/O 中，CSS推出了眾多令人振奮的新特性和功能，例如：容器查詢 (Container queries)、樣式查詢 (Style queries)、:has() 選擇器、color-mix() 函數、巢狀結構 (Nesting)、三角函數、滾動式動畫 (Scroll-driven animations) 等功能。

其中，最令我感到驚奇的莫過於就是「滾動式動畫」了，這使得以往都需要使用到 JavaScript 監聽滾動的互動，往後只需要純 CSS 就可以實現同樣的互動效果了，雖然目前因兼容性問題還無法實際導入項目當中，但我們還是可以先來了解一下這個新功能。

| 簡介

‧ 傳統 CSS 動畫

在傳統 CSS 中，我們會透過 @keyframes 來建立動畫，並使用 animation-name 屬性將此功能連結至元素，同時設定 animation-duration 來決定動畫的時長，此外，也還可以 animation-timing-function、animation-delay 和 animation-iteration-count 等 animation-* 等屬性來為動畫做更詳細的設定，這些屬性都可以在 animation 簡寫中合併使用。

// 以下動畫隨著時間，放大 X 軸上的元素
@keyframes scale-up {
 from {
  transform: scaleX(0);
 }
 to {
  transform: scaleX(1);
 }
}

#progress {
 animation: scale-up 2.5s linear forwards;
}

‧ 滾動式動畫

滾動式動畫是指當用戶滾動頁面時，會觸發特定的動畫效果，例如元素在滾動過程中的移動、縮放、旋轉等效果，然而動畫的執行過程將改由頁面滾動來控制，動畫只會隨著頁面滾動而變化，時間不再起作用。

| 技術實現

在預設情況下，CSS 動畫的時間軸是依照文件時間軸 (document timeline) 執行的，也就是在網頁載入時從 0 開始計算，並隨著時間流逝而開始執行。

在 Chrome 115 版本中，正式支援了 CSS animation-timeline，同時也新增了兩種新的動畫時間軸（滾動進度時間軸＆查看進度時間軸），使得以往需要透過 JavaScript 監聽滾動的互動幾乎都可以使用純 CSS 實現了。

👉 查看瀏覽器支援度