發布日期：2025 年 12 月 12 日
2023 年，我們推出了捲動驅動動畫，讓您透過捲動前進 (或倒轉) 動畫。使用捲動驅動動畫時，動畫進度會隨著捲動從 0% 推進到 100%。停止捲動時，動畫會暫停；向上捲動時，動畫會反向播放。
捲動式動畫的下一個章節將於 2026 年推出，Chrome 145 將支援捲動觸發動畫。這類動畫會根據時間觸發，並在捲動偏移量達到特定值時啟動。
這類效果現在可以在 CSS 中宣告，因此不需要再使用 IntersectionObserver。
時間軸觸發條件、動畫觸發條件和動作
觸發動畫
如要在 CSS 中設定捲動觸發的動畫，請先為元素附加一般 CSS 動畫：
animation: unclip 0.35s ease-in-out both;
這項動畫會使用 DocumentTimeline 做為驅動程式，並執行 0.35 秒。網頁載入後，系統會自動觸發動畫。如要變更觸發條件，請使用新的 animation-trigger CSS 屬性：
animation-trigger: --t play-forwards play-backwards;
在這裡，動畫會設為由觸發條件 --t 觸發。觸發條件啟動時，系統會對動畫叫用 play-forwards 動作；觸發條件停用時，系統則會叫用 play-backwards 動作。
規格包含完整動作清單。
建立觸發條件
但這個--t觸發條件是什麼？這是名為「--t」的觸發條件。如果是捲動觸發的動畫，則為「時間軸觸發」，會使用「捲動進度時間軸」或「檢視進度時間軸」做為來源。
如要定義時間軸觸發條件，請使用 timeline-trigger 屬性 (或其相關的簡寫)。舉例來說，如要建立名為 --t 的觸發條件，並使用檢視時間軸做為來源，請使用下列指令：
timeline-trigger-name: --t;
timeline-trigger-source: view();
這個建立的觸發條件 --t 會根據與相符元素相關聯的檢視時間軸啟用和停用。由於檢視時間軸的預設範圍是cover 範圍，因此觸發條件也會在該範圍內或範圍外啟用和停用。
調整觸發條件的範圍
如要調整觸發條件應處於啟用或停用狀態的位置，請在觸發條件中指定啟用和有效範圍。在以下範例中，啟用範圍設為 entry 100% exit 0%，表示主體進入該範圍後，就會觸發動作。
timeline-trigger:
--t
view()
entry 100% exit 0%
;
由於上述程式碼片段未指定有效範圍，因此啟用範圍也會做為有效範圍。如果超出有效範圍，觸發條件就會停用。
結合已定義的 animation-trigger 時，這會在視覺上產生以下效果：主體完全進入捲動埠時，動畫會向前播放；主體即將離開捲動埠時，動畫會向後播放。
entry 100% exit 0%。影片也顯示偵錯線，指出範圍的開始和結束位置。
啟動範圍和有效範圍可能不同。例如：
timeline-trigger:
--t
view()
entry 100% exit 0% / entry 0% exit 100%
;
在這裡，當主體位於 entry 100% exit 0% 範圍內時，就會觸發動作。觸發條件會保持有效，直到離開 entry 0% exit 100% 範圍為止。
從視覺上看，這會讓動畫在主體進入捲動檢視區塊時向前播放，且與先前不同的是，動畫會保持啟用狀態，直到主體完全離開捲動檢視區塊為止。
entry 100% exit 0% / entry 0% exit 100%。示範也會顯示偵錯行，指出範圍的開始和結束位置。有效範圍會封閉捲動埠，因此無法看到偵錯線。
限制觸發條件的範圍
觸發條件會向全域顯示，也就是說，最後一個宣告特定名稱觸發條件的相符項目會「勝出」。如要限制觸發條件的顯示範圍，請使用 trigger-scope 屬性。這與 anchor-scope 的使用方式類似。
trigger-scope: --t; /* List of dashed idents, or `all` */
如果 CSS 規則宣告的觸發條件符合多個元素，您就需要使用 trigger-scope。
示範
在下列示範中，表單會分割到各種全高區塊。當表單的每個部分進入檢視畫面時，系統會使用捲動觸發的動畫，以動畫方式顯示表單。離開捲動埠時，會以動畫效果隱藏。
這項功能的捲動觸發動畫邏輯如下：
@keyframes card {
from { translate: 0 -50% 0; }
}
@keyframes card-contents {
from { opacity: 0; height: 0px; }
to { opacity: 1; height: auto; }
}
.card {
overflow-y: clip; /* Hide any overflow in the y-axis */
timeline-trigger:
--t
view()
contain 15% contain 85% / entry 100% exit 0%
;
trigger-scope: --t;
animation: unclip var(--duration) ease-in-out both;
animation-trigger: --t play-forwards play-backwards;
}
.card > * {
interpolate-size: allow-keywords; /* To animate to `height: auto` */
animation: card-contents var(--duration) ease-in-out both;
animation-trigger: --t play-forwards play-backwards;
}
程式碼剖析如下：
timeline-trigger名為--t，來源設為追蹤相符元素的檢視時間軸。- 觸發條件的啟動範圍為
contain 15% contain 85%。當拍攝目標位於該範圍內時，觸發條件就會啟用。 - 啟用後，只要主體位於
entry 100% exit 0%的有效範圍內，觸發條件就會保持啟用狀態。 unclip動畫已附加至元素。- 動畫已設為使用
--t做為觸發來源。觸發條件啟動後，動畫會開始正向播放。 - 當觸發條件停用 (也就是主體離開有效範圍時)，動畫會反向播放。
- 卡片內容也會使用相同的觸發條件
--t，以動畫效果顯示和隱藏。
如果瀏覽器不支援 timeline-trigger，這個範例會使用 IntersectionObserver 做為備用選項。
更多示範
如果捲動觸發的動畫不夠用，請參閱下列範例：
意見回饋
我們很想聽聽你的意見，以便持續改善這項功能。歡迎透過社群媒體與我們聯絡，或在 CSS 工作群組中提出問題，提供意見回饋。
如果遇到錯誤，請回報 Chromium 錯誤，讓我們瞭解情況。已知錯誤清單：請參閱 Chromium 錯誤追蹤器。