scroll-timeline-name
scroll-timeline-name CSS 屬性用於定義命名滾動進度時間線的名稱，該時間線透過在可滾動元素（滾動器）之間上下（或左右）滾動來推進。scroll-timeline-name 在提供時間線的滾動器上設定。
然後，該名稱會在 animation-timeline 宣告中被引用，以指示透過滾動操作來驅動動畫進度的容器元素。
注意：如果元素在其軸維度上未溢位其容器，或者溢位被隱藏或剪裁，則不會建立時間線。
scroll-timeline-axis 和 scroll-timeline-name 屬性也可以使用 scroll-timeline 簡寫屬性進行設定。
語法
scroll-timeline-name: none;
scroll-timeline-name: --custom_name_for_timeline;
值
scroll-timeline-name 允許的值為
none-
時間線沒有名稱。
<dashed-ident>-
一個任意的自定義識別符號，定義了滾動進度時間線的名稱，然後可以在
animation-timeline屬性中引用該名稱。注意：
<dashed-ident>值必須以--開頭，這有助於避免與標準 CSS 關鍵字的名稱衝突。
正式定義
正式語法
scroll-timeline-name =
[ none | <dashed-ident> ]#
示例
建立命名滾動進度時間線動畫
在此示例中，使用 ID 為 container 的元素上的 scroll-timeline-name 屬性定義了一個名為 --square-timeline 的滾動時間線。然後使用 animation-timeline: --square-timeline 將其應用於 #square 元素上的動畫。
HTML
示例的 HTML 如下所示。
<div id="container">
<div id="square"></div>
<div id="stretcher"></div>
</div>
CSS
容器的 CSS 使用 scroll-timeline-name 屬性將其設定為名為 --square-timeline 的滾動時間線的來源。此處未定義捲軸軸，因為預設情況下將使用垂直軸。
容器的高度設定為 300px，如果容器溢位，容器也會建立一個垂直捲軸（下面 stretcher 元素上的 CSS height 規則確實會使內容溢位其容器）。
#container {
height: 300px;
overflow-y: scroll;
scroll-timeline-name: --square-timeline;
position: relative;
}
下面的 CSS 定義了一個正方形，它根據 animation-timeline 屬性提供的時間線旋轉，該屬性設定為上面命名的 --square-timeline 時間線。
#square {
background-color: deeppink;
width: 100px;
height: 100px;
margin-top: 100px;
animation-name: rotateAnimation;
animation-duration: 1ms; /* Firefox requires this to apply the animation */
animation-timeline: --square-timeline;
position: absolute;
bottom: 0;
}
#stretcher {
height: 600px;
background: #dedede;
}
@keyframes rotateAnimation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
stretcher CSS 規則將塊高度設定為 600px，這會建立溢位容器元素的內容，從而建立捲軸。如果沒有此元素，內容將不會溢位容器，不會有捲軸，因此也沒有可與動畫時間線關聯的滾動時間線。
結果
滾動垂直條以檢視正方形在您滾動時進行動畫。
規範
| 規範 |
|---|
| 滾動驅動動畫 # scroll-timeline-name |
瀏覽器相容性
載入中…