| 技術實現：滾動進度時間軸 Scroll Progress Timeline

當頁面或容器滾動時，會將滾動範圍中的位置轉換為百分比，並反映在動畫進度上。（滾動起始位置為 0 %、結束位置為 100 %。）

‧ 建立匿名時間軸

使用 scroll() 建立，並可傳遞 <scroller> 和 <axis> 兩個參數。

// 無參數
animation-timeline: scroll();

// 設定滾動容器
animation-timeline: scroll(nearest); // 預設
animation-timeline: scroll(root);
animation-timeline: scroll(self);

// 設定滾動方向
animation-timeline: scroll(block); // 預設
animation-timeline: scroll(inline);
animation-timeline: scroll(y);
animation-timeline: scroll(x);

// 同時設定滾動容器及方向
animation-timeline: scroll(block nearest); // 預設
animation-timeline: scroll(inline root);
animation-timeline: scroll(x self);

‧ 建立命名時間軸

使用 scroll-timeline-name 屬性指定滾動容器，屬性名稱必須以 -- 開頭來命名（如 CSS 變數），並通過 scroll-timeline-axis 設定滾動方向，兩者還可以簡寫成 animation-timeline 屬性。

// 滾動動畫
@keyframes animate-it {
  ...
}

// 滾動容器
.container {
  scroll-timeline-name: --my-scroller;
  scroll-timeline-axis: block;
 
  // 簡寫
  scroll-timeline: --my-scroller block;

  .elememt {
    animation: animate-it linear;
    animation-timeline: --my-scroller;
  }
}

| 技術實現：查看進度時間軸 View Progress Timeline

追蹤一個元素出現在滾動容器內的顯示比例，此時間軸從元素與滾動容器產生交集時開始，並於停止交會時結束。（元素進入容器前為 0 %、離開容器後為 100 %。）

‧ 建立匿名時間軸

使用 view() 建立，並可傳遞 <axis> 和 <view-timeline-inset> 兩個參數。

// 無參數
animation-timeline: view();

// 設定滾動方向
animation-timeline: view(block); // 預設
animation-timeline: view(inline);
animation-timeline: view(y);
animation-timeline: view(x);

// 設定元素的查看範圍
animation-timeline: view(auto); // 預設
animation-timeline: view(20%);
animation-timeline: view(200px);
animation-timeline: view(20% 40%);
animation-timeline: view(20% 200px);
animation-timeline: view(100px 200px);
animation-timeline: view(auto 200px);

// 同時設定滾動方向及查看範圍
animation-timeline: view(block auto); // 預設
animation-timeline: view(inline 20%);
animation-timeline: view(x 200px auto);

‧ 建立命名時間軸

與滾動進度時間軸的命名方式相似，可以使用 view-timeline-name 來命名，並使用 view-timeline-axis 和 view-timeline-inset 來設定滾動方向和查看範圍。

// 滾動動畫
@keyframes animate-it {
  ...
}

// 元素
.element {
  // 創建 View Timeline
  view-timeline-name: --reveal;
  view-timeline-axis: block;

  // 動畫連結 View Timeline
  animation: animate-it linear auto both;
  animatiom-timeline: --reveal;
}