1. Web
  2. CSS
  3. animation-timeline

animation-timeline

可用性有限

此特性不是基線特性，因為它在一些最廣泛使用的瀏覽器中不起作用。

animation-timeline 這個 CSS 屬性指定了用於控制 CSS 動畫進度的動畫時間軸。

可以透過 animation-timeline 設定以下型別的時間軸：

  • 預設的文件時間軸，該時間軸的進度由文件在瀏覽器中首次載入後的時間流逝來驅動。這是傳統上與 CSS 動畫相關聯的時間軸，透過將值設定為 auto 或完全不指定 animation-timeline 值來選擇。
  • 滾動進度時間軸，該時間軸的進度由可滾動元素（scroller）從上到下（或從左到右）滾動來驅動。滾動範圍內的位置被轉換為進度百分比——開始時為 0%，結束時為 100%。提供滾動進度時間軸的元素可以透過兩種方式指定：
    • 命名滾動進度時間軸，其中提供滾動進度時間軸的滾動容器使用 scroll-timeline-name 屬性（或 scroll-timeline 簡寫屬性）顯式命名。然後，該名稱透過指定為要應用動畫的元素的 animation-timeline 屬性值，與該元素連結起來。
    • 匿名滾動進度時間軸，其中要應用動畫的元素被賦予一個 scroll() 函式作為 animation-timeline 的值，該函式會根據你傳入的引數，選擇提供滾動進度時間軸的滾動容器以及要使用的滾動軸。
  • 檢視進度時間軸，該時間軸的進度由一個元素（稱為主體）在滾動容器內的可見性變化來驅動。滾動容器內主體的可見性被跟蹤——預設情況下，當主體在滾動容器的一端首次可見時，時間軸為 0%，當它到達另一端時為 100%。與滾動進度時間軸不同，你不能指定滾動容器——主體的可見性總是在其最近的祖先滾動容器內被跟蹤。提供檢視進度時間軸的主體可以透過兩種方式指定：
    • 命名檢視進度時間軸，其中主體使用 view-timeline-name 屬性（或 view-timeline 簡寫屬性）顯式命名。然後，該名稱透過指定為要應用動畫的元素的 animation-timeline 屬性值，與該元素連結起來。這是一個關鍵點——對於命名檢視進度時間軸，要應用動畫的元素不必與主體是同一個元素。
    • 匿名檢視進度時間軸，其中主體被賦予一個 view() 函式作為 animation-timeline 的值，使其根據其在最近的父滾動容器內的位置來播放動畫。

備註：animation-timeline 作為僅重置值包含在 animation 簡寫屬性中。這意味著包含 animation 會將先前宣告的 animation-timeline 值重置為 auto，但不能透過 animation 設定一個具體的值。在建立 CSS 滾動驅動動畫時，你需要在宣告任何 animation 簡寫屬性之後再宣告 animation-timeline，它才能生效。

語法

css
/* Keyword */
animation-timeline: none;
animation-timeline: auto;

/* Single animation named timeline */
animation-timeline: --timeline_name;

/* Single animation anonymous scroll progress timeline */
animation-timeline: scroll();
animation-timeline: scroll(scroller axis);

/* Single animation anonymous view progress timeline */
animation-timeline: view();
animation-timeline: view(axis inset);

/* Multiple animations */
animation-timeline: --progress-bar-timeline, --carousel-timeline;
animation-timeline: none, --sliding-timeline;

/* Global values */
animation-timeline: inherit;
animation-timeline: initial;
animation-timeline: revert;
animation-timeline: revert-layer;
animation-timeline: unset;

值

none

動畫不與任何時間軸關聯。

auto

動畫的時間軸是文件的預設 DocumentTimeline。

scroll()

由當前元素的某個祖先滾動容器提供一個匿名滾動進度時間軸。該函式的引數允許你選擇滾動容器以及用於測量時間軸的滾動軸。

更多資訊請參見 scroll()。

view()

由設定了 animation-timeline: view(); 的主體提供一個匿名檢視進度時間軸。該函式的引數允許你選擇用於跟蹤時間軸進度的捲軸軸，以及一個用於調整主體被視為可見的區域位置的插值。

更多資訊請參見 view()。

<dashed-ident>

一個 <dashed-ident>，用於標識先前透過 scroll-timeline-name 或 view-timeline-name 屬性（或 scroll-timeline 或 view-timeline 簡寫屬性）宣告的命名時間軸。

備註：如果兩個或多個時間軸共享相同的名稱，則將使用在層疊中最後宣告的那個。此外，如果找不到與給定名稱匹配的時間軸，則該動畫不與任何時間軸關聯。

備註：<dashed-ident> 值必須以 -- 開頭。這有助於避免與標準的 CSS 關鍵字發生名稱衝突。

正式定義

初始值auto
應用於所有元素
繼承性否
計算值一個列表，每個專案要麼是區分大小寫的 CSS 識別符號，要麼是關鍵字 none、auto
動畫型別不可動畫化

正式語法

animation-timeline = 
  <single-animation-timeline>#  

<single-animation-timeline> = 
  auto            |
  none            |
  <dashed-ident>  |
  <scroll()>      |
  <view()>        

<scroll()> = 
  scroll( [ <scroller> || <axis> ]? )  

<view()> = 
  view( [ <axis> || <'view-timeline-inset'> ]? )  

<scroller> = 
  root     |
  nearest  |
  self     

<axis> = 
  block   |
  inline  |
  x       |
  y       

<view-timeline-inset> = 
  [ [ auto | <length-percentage> ]{1,2} ]#  

<length-percentage> = 
  <length>      |
  <percentage>

示例

設定命名滾動進度時間軸

在 id 為 container 的元素上，使用 scroll-timeline-name 屬性定義一個名為 --square-timeline 的滾動進度時間軸。然後，透過 animation-timeline: --square-timeline 將其設定為 #square 元素上動畫的時間軸。

HTML

示例的 HTML 如下所示。

html
<div id="container">
  <div id="square"></div>
  <div id="stretcher"></div>
</div>

CSS

容器的 CSS 使用 scroll-timeline-name 屬性將其設定為名為 --square-timeline 的滾動進度時間軸的來源（我們可以使用 scroll-timeline-axis 明確設定要使用的捲軸軸，但這裡只有一個塊方向的捲軸，並且它將預設被使用）。

容器的高度設定為 300px，並且我們還設定瞭如果內容溢位，容器會建立垂直捲軸（下面我們將使用 CSS 在“stretcher”元素上確保它確實會溢位）。

css
#container {
  height: 300px;
  overflow-y: scroll;
  scroll-timeline-name: --square-timeline;
  position: relative;
}

下面的 CSS 定義了一個正方形，它根據 animation-timeline 屬性提供的時間軸交替旋轉，該屬性設定為上面命名的 --square-timeline 時間軸。

css
#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-direction: alternate;
  animation-timeline: --square-timeline;

  position: absolute;
  bottom: 0;
}

@keyframes rotateAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

“stretcher”的 CSS 將塊級高度設定為 600px，這會強制容器元素溢位並建立捲軸。如果沒有這個元素，就不會有捲軸，因此也就沒有可以與動畫時間軸關聯的滾動進度時間軸。

css
#stretcher {
  height: 600px;
}

結果

滾動以檢視正方形元素的動畫效果。

設定匿名滾動進度時間軸

在此示例中，#square 元素使用匿名滾動進度時間軸進行動畫處理，該時間軸透過 scroll() 函式應用於要動畫的元素。本例中的時間軸由具有（任何）捲軸的最近父元素提供，並使用塊方向的捲軸。

HTML

示例的 HTML 如下所示。

html
<div id="container">
  <div id="square"></div>
  <div id="stretcher"></div>
</div>

CSS

下面的 CSS 定義了一個正方形，它根據 animation-timeline 屬性提供的時間軸交替旋轉。在這種情況下，時間軸由 scroll(block nearest) 提供，這意味著它將選擇具有捲軸的最近祖先元素的塊方向上的捲軸；在這裡是“container”元素的垂直捲軸。

備註：block 和 nearest 實際上是預設引數值，所以我們本可以只使用 scroll()。

css
#square {
  background-color: deeppink;
  width: 100px;
  height: 100px;
  margin-top: 100px;
  position: absolute;
  bottom: 0;

  animation-name: rotateAnimation;
  animation-duration: 1ms; /* Firefox requires this to apply the animation */
  animation-direction: alternate;
  animation-timeline: scroll(block nearest);
}

@keyframes rotateAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

容器的 CSS 將其高度設定為 300px，並且我們還設定瞭如果內容溢位，容器會建立垂直捲軸。“stretcher”的 CSS 將塊級高度設定為 600px，這會強制容器元素溢位。這兩者共同確保容器具有垂直捲軸，從而允許它被用作匿名滾動進度時間軸的來源。

css
#container {
  height: 300px;
  overflow-y: scroll;
  position: relative;
}

#stretcher {
  height: 600px;
}

結果

滾動以檢視正方形元素的動畫效果。

設定命名檢視進度時間軸

在 class 為 animation 的主體元素上，使用 view-timeline-name 屬性定義一個名為 --subject-reveal 的檢視進度時間軸。然後，使用 animation-timeline: --subject-reveal; 將其設定為同一元素的時間軸。結果是，當主體元素在文件中向上滾動時，它會播放動畫。

HTML

示例的 HTML 如下所示。

html
<div class="content">
  <h1>Content</h1>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Risus quis varius quam
    quisque id. Et ligula ullamcorper malesuada proin libero nunc consequat
    interdum varius. Elit ullamcorper dignissim cras tincidunt lobortis feugiat
    vivamus at augue.
  </p>

  <p>
    Dolor sed viverra ipsum nunc aliquet. Sed sed risus pretium quam vulputate
    dignissim. Tortor aliquam nulla facilisi cras. A erat nam at lectus urna
    duis convallis convallis. Nibh ipsum consequat nisl vel pretium lectus.
    Sagittis aliquam malesuada bibendum arcu vitae elementum. Malesuada bibendum
    arcu vitae elementum curabitur vitae nunc sed velit.
  </p>

  <div class="subject animation"></div>

  <p>
    Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Arcu
    cursus vitae congue mauris rhoncus aenean vel. Sit amet cursus sit amet
    dictum. Augue neque gravida in fermentum et. Gravida rutrum quisque non
    tellus orci ac auctor augue mauris. Risus quis varius quam quisque id diam
    vel quam elementum. Nibh praesent tristique magna sit amet purus gravida
    quis. Duis ultricies lacus sed turpis tincidunt id aliquet. In egestas erat
    imperdiet sed euismod nisi. Eget egestas purus viverra accumsan in nisl nisi
    scelerisque. Netus et malesuada fames ac.
  </p>
</div>

CSS

subject 元素及其包含的 content 元素僅應用了最少的樣式，文字內容則設定了一些基本的字型樣式。

css
.subject {
  width: 300px;
  height: 200px;
  margin: 0 auto;
  background-color: deeppink;
}

.content {
  width: 75%;
  max-width: 800px;
  margin: 0 auto;
}

p,
h1 {
  font-family: "Helvetica", "Arial", sans-serif;
}

h1 {
  font-size: 3rem;
}

p {
  font-size: 1.5rem;
  line-height: 1.5;
}

class 為 subject 的 <div> 也被賦予了 animation 類——在這裡設定 view-timeline-name 來定義一個命名檢視進度時間軸。它也被賦予了相同值的 animation-timeline 名稱，以聲明當檢視進度時間軸推進時，這個元素將是播放動畫的元素。

最後，在元素上指定了一個動畫，該動畫使其不透明度和縮放發生變化，從而在它向上移動捲軸時淡入並變大。

css
.animation {
  view-timeline-name: --subject-reveal;
  animation-timeline: --subject-reveal;

  animation-name: appear;
  animation-fill-mode: both;
  animation-duration: 1ms; /* Firefox requires this to apply the animation */
}

@keyframes appear {
  from {
    opacity: 0;
    transform: scaleX(0);
  }

  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

結果

滾動以檢視主體元素的動畫效果。

設定匿名檢視進度時間軸

在 class 為 subject 的元素上，使用 animation-timeline: view() 設定了一個匿名檢視進度時間軸。結果是，當 subject 元素在文件中向上滾動時，它會播放動畫。

HTML

示例的 HTML 如下所示。

html
<div class="content">
  <h1>Content</h1>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Risus quis varius quam
    quisque id. Et ligula ullamcorper malesuada proin libero nunc consequat
    interdum varius. Elit ullamcorper dignissim cras tincidunt lobortis feugiat
    vivamus at augue.
  </p>

  <p>
    Dolor sed viverra ipsum nunc aliquet. Sed sed risus pretium quam vulputate
    dignissim. Tortor aliquam nulla facilisi cras. A erat nam at lectus urna
    duis convallis convallis. Nibh ipsum consequat nisl vel pretium lectus.
    Sagittis aliquam malesuada bibendum arcu vitae elementum. Malesuada bibendum
    arcu vitae elementum curabitur vitae nunc sed velit.
  </p>

  <div class="subject animation"></div>

  <p>
    Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Arcu
    cursus vitae congue mauris rhoncus aenean vel. Sit amet cursus sit amet
    dictum. Augue neque gravida in fermentum et. Gravida rutrum quisque non
    tellus orci ac auctor augue mauris. Risus quis varius quam quisque id diam
    vel quam elementum. Nibh praesent tristique magna sit amet purus gravida
    quis. Duis ultricies lacus sed turpis tincidunt id aliquet. In egestas erat
    imperdiet sed euismod nisi. Eget egestas purus viverra accumsan in nisl nisi
    scelerisque. Netus et malesuada fames ac.
  </p>
</div>

CSS

subject 元素及其包含的 content 元素僅應用了最少的樣式，文字內容則設定了一些基本的字型樣式。

css
.subject {
  width: 300px;
  height: 200px;
  margin: 0 auto;
  background-color: deeppink;
}

.content {
  width: 75%;
  max-width: 800px;
  margin: 0 auto;
}

p,
h1 {
  font-family: "Helvetica", "Arial", sans-serif;
}

h1 {
  font-size: 3rem;
}

p {
  font-size: 1.5rem;
  line-height: 1.5;
}

class 為 subject 的 <div> 也被賦予了 animation 類——在這裡設定 animation-timeline: view()，以聲明當它在其滾動祖先（本例中是文件的根元素）提供的檢視進度時間軸中推進時，它將被動畫化。

最後，在元素上指定了一個動畫，該動畫使其不透明度和縮放發生變化，從而在它向上移動捲軸時淡入並變大。

css
.animation {
  animation-timeline: view();

  animation-name: appear;
  animation-fill-mode: both;
  animation-duration: 1ms; /* Firefox requires this to apply the animation */
}

@keyframes appear {
  from {
    opacity: 0;
    transform: scaleX(0);
  }

  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

結果

滾動以檢視主體元素的動畫效果。

規範

規範
CSS Animations Level 2
# animation-timeline

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面的最後修改時間是 ，由 MDN 貢獻者修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題
© . Content available under a Creative Commons license.