1. Web
  2. CSS
  3. timeline-scope

timeline-scope

可用性有限

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

timeline-scope CSS 屬性修改命名動畫時間軸的作用域。

預設情況下，命名時間軸（即使用 scroll-timeline-name 或 view-timeline-name 宣告的）只能作為其直接後代元素的控制時間軸（即透過將其 animation-timeline 設定為時間軸名稱作為其值）。這是時間軸的預設“作用域”。

timeline-scope 被賦予在後代元素上定義的時間軸的名稱；這會使時間軸的作用域擴充套件到設定了 timeline-scope 的元素及其任何後代。換句話說，該元素及其任何後代元素現在都可以使用該時間軸進行控制。

注意：如果不存在具有 timeline-scope 值中給定的名稱的時間軸（或存在多個時間軸），則會建立一個具有指定名稱的非活動時間軸。

語法

css
timeline-scope: none;
timeline-scope: custom_name_for_timeline;

值

timeline-scope 的允許值為

none

時間軸作用域沒有變化。

<dashed-ident>

指定在後代元素上定義的現有命名時間軸的名稱（即使用 scroll-timeline-name 或 view-timeline-name 宣告的）。這會使時間軸作用域擴充套件到設定了 timeline-scope 的元素及其任何後代。

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

正式定義

初始值none
應用於所有元素
繼承性否
計算值none 或識別符號的有序列表
動畫型別不可動畫化

正式語法

timeline-scope = 
  none             |
  all              |
  <dashed-ident>#

示例

在此示例中，一個名為 --my-scroller 的滾動時間軸是使用 scroll-timeline-name 屬性在具有 scroller 類（滾動元素）的元素上定義的。然後，它透過 animation-timeline: --my-scroller 應用於具有 box 和 animation 類（動畫元素）的元素的動畫。這裡需要注意的關鍵點是，動畫元素不是滾動元素的後代——為了使其工作，我們透過在 <body> 上設定 timeline-scope: --my-scroller 來增加 --my-scroller 時間軸的作用域。

HTML

示例的 HTML 如下所示。

html
<div class="content">
  <div class="box animation"></div>
</div>

<div class="scroller">
  <div class="long-element"></div>
</div>

CSS

CSS 如下。

首先，我們將 <body> 的高度設定為 100vh，並使用 flexbox 將其兩個子元素佈局為兩個等寬列。我們還在其上設定 timeline-scope: --my-scroller，以便可以將 --my-scroller 時間軸設定為在 <body> 及其內部的任何元素上設定的動畫的控制時間軸。

css
body {
  margin: 0;
  height: 100vh;
  display: flex;

  /* increases the timeline scope from the .scroller <div> element
  to the whole <body> */
  timeline-scope: --my-scroller;
}

.content,
.scroller {
  flex: 1;
}

接下來，滾動元素上設定了 --my-scroller 時間軸，overflow 使其可以滾動，併為其指定了背景顏色，以便清晰可見其邊界。滾動元素的子長元素被賦予了較大的高度，以便滾動元素實際滾動。

css
.scroller {
  overflow: scroll;
  scroll-timeline-name: --my-scroller;
  background: deeppink;
}

.long-element {
  height: 2000px;
}

接下來，我們為動畫元素提供一些基本的樣式，並對其應用動畫。我們還使用 animation-timeline: --my-scroller 將 --my-scroller 時間軸應用於它。重申一下，這之所以可能，僅僅是因為我們之前在 <body> 元素上設定了 timeline-scope: --my-scroller —— 動畫元素不是滾動元素的後代。

css
.box {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  background-color: rebeccapurple;
  position: fixed;
  top: 20px;
  left: 0%;
}

.animation {
  animation: rotate-appear;
  animation-timeline: --my-scroller;
}

@keyframes rotate-appear {
  from {
    rotate: 0deg;
    left: 0%;
  }

  to {
    rotate: 720deg;
    left: 100%;
  }
}

結果

滾動粉色區域上的垂直條以檢視方塊動畫。

規範

規範
滾動驅動動畫
# propdef-timeline-scope

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

本頁面最後修改於 ，由 MDN 貢獻者完成。

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