scroll-timeline
scroll-timeline CSS 簡寫屬性用於定義一個命名滾動進度時間軸，該時間軸透過在頂部和底部（或左側和右側）之間滾動可滾動元素（滾動器）來推進。scroll-timeline 設定在提供時間軸的滾動器上。起始滾動位置代表 0% 進度，結束滾動位置代表 100% 進度。如果 0% 位置和 100% 位置重合（即，滾動容器沒有可供滾動的溢位），則時間軸處於非活動狀態。
scroll-timeline 可以包含兩個組成值——命名滾動進度時間軸的名稱，以及一個可選的滾動軸值。
然後，該名稱在 animation-timeline 宣告中被引用，以指示用於透過滾動動作驅動動畫進度的容器元素。
注意：如果滾動器在軸方向上沒有溢位其容器，或者溢位被隱藏或裁剪，則不會建立時間軸。
構成屬性
此屬性是以下 CSS 屬性的簡寫：
語法
/* two values: one each for scroll-timeline-name and scroll-timeline-axis */
scroll-timeline: --custom_name_for_timeline block;
scroll-timeline: --custom_name_for_timeline inline;
scroll-timeline: --custom_name_for_timeline y;
scroll-timeline: --custom_name_for_timeline x;
scroll-timeline: none block;
scroll-timeline: none inline;
scroll-timeline: none y;
scroll-timeline: none x;
/* one value: scroll-timeline-name */
scroll-timeline: none;
scroll-timeline: --custom_name_for_timeline;
scroll-timeline 簡寫屬性可以作為 <scroll-timeline-name> 和 <scroll-timeline-axis> 值的組合應用於容器元素。必須指定其中至少一個值。如果同時指定了這兩個值，則順序必須是 <scroll-timeline-name> 值在前，<scroll-timeline-axis> 值在後。
注意：<scroll-timeline-name> 值必須是 <dashed-ident> 值，這意味著它們必須以 -- 開頭。這有助於避免與標準 CSS 關鍵字發生名稱衝突。
值
<scroll-timeline-name>-
請參閱
scroll-timeline-name。 <scroll-timeline-axis>-
請參閱
scroll-timeline-axis。預設值為block。
正式定義
| 初始值 | 作為簡寫中的每個屬性
|
|---|---|
| 應用於 | 滾動容器 |
| 繼承性 | 否 |
| 計算值 | 作為簡寫中的每個屬性
|
| 動畫型別 | 作為簡寫中的每個屬性
|
正式語法
scroll-timeline =
[ <'scroll-timeline-name'> <'scroll-timeline-axis'>? ]#
<scroll-timeline-name> =
[ none | <dashed-ident> ]#
<scroll-timeline-axis> =
[ block | inline | x | y ]#
示例
建立命名滾動進度時間線動畫
在此示例中，使用 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 屬性命名為 --square-timeline 的滾動時間軸的來源。它還將用於時間軸的捲軸設定為垂直捲軸（實際上不需要這樣做，因為它是預設值）。
容器的高度設定為 300px，如果內容溢位，容器也會建立垂直捲軸（下面 stretcher 元素上的 CSS height 規則確實會使內容溢位其容器）。
#container {
height: 300px;
overflow-y: scroll;
scroll-timeline: --square-timeline y;
/* Firefox supports the older "vertical" syntax */
scroll-timeline: --square-timeline vertical;
position: relative;
}
下面的 CSS 定義了一個正方形，它根據 animation-timeline 屬性提供的時間軸旋轉，該屬性設定為上面命名的 --square-timeline 時間軸。
#square {
background-color: deeppink;
width: 100px;
height: 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 時，動畫持續時間取決於滾動速度（儘管如此，已定義 animation-duration 屬性，以便您可以看出由滾動驅動的動畫）。
規範
| 規範 |
|---|
| 滾動驅動動畫 # scroll-timeline-shorthand |
瀏覽器相容性
載入中…