CSS 滾動驅動動畫

CSS 滾動驅動動畫模組提供了建立在 CSS 動畫模組和 Web 動畫 API 之上的功能。它允許您根據滾動時間軸的進度而不是預設的基於文件時間軸的時間來動畫屬性值。這意味著您可以透過滾動可滾動元素來動畫元素，而不僅僅是隨著時間的推移。

滾動驅動時間軸有兩種型別

• 滾動進度時間軸：您可以透過從上到下（或從左到右）然後再次滾動可滾動元素（滾動器）來推進此時間軸。滾動範圍中的位置被轉換為進度百分比 — 開始時為 0%，結束時為 100%。
• 檢視進度時間軸：您根據元素（稱為主體）在滾動器中的可見性變化來推進此時間軸。主體在滾動器中的可見性作為進度百分比進行跟蹤 — 預設情況下，當主體首次在滾動器的一側可見時，時間軸為 0%，當它到達另一側時為 100%。

當這些時間軸中的一個應用於動畫元素時，動畫將沿著該時間軸前進，而不是遵循預設的基於時間的時間軸。

可以調整動畫在滾動進度和檢視進度時間軸上的有效位置，即您可以定義動畫的開始和結束位置。這可以通過幾種不同的方式完成

• 開始和結束動畫範圍值可以應用於動畫，以調整動畫在時間軸上的起始和結束位置。
• 檢視進度時間軸可以應用開始和/或結束內邊距（或外邊距）來調整滾動視口（有關更多詳細資訊，請參閱 滾動容器）的位置，其中主體元素被認為是可見的。換句話說，這允許您指定開始和/或結束內邊距（或外邊距）值來抵消時間軸本身的位置。