时间线范围

实验性： 这是一个 实验性技术
在生产环境中使用此功能之前，请仔细查看 浏览器兼容性表。

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>#

示例

在这个例子中，一个名为--myScroller的滚动时间线被定义，它使用scroll-timeline-name属性作用于具有scroller类（滚动元素）的元素上。然后，它通过animation-timeline: --myScroller应用到具有box和animation类（动画元素）的元素上的动画。这里需要注意的关键点是，动画元素不是滚动元素的后代——为了使它工作，我们通过在<body>上设置timeline-scope: --myScroller来扩大--myScroller时间线的范围。

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: --myScroller，以便--myScroller时间线可以被设置为对<body>及其内部任何元素设置的动画的控制时间线。

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

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

.content,
.scroller {
  flex: 1;
}

接下来，滚动元素设置了--myScroller时间线，以及overflow使其可滚动，并赋予其背景颜色以便清晰地看到其边界。滚动元素的子元素（长元素）被赋予了较大的高度，以便滚动元素能够实际滚动。

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

.long-element {
  height: 2000px;
}

接下来，我们为动画元素添加了一些基本样式，并对其应用了动画。我们还使用animation-timeline: --myScroller将--myScroller时间线应用于它。重申一下，这只有在我们之前在<body>元素上设置timeline-scope: --myScroller的情况下才有可能——动画元素**不是**滚动元素的后代。

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

.animation {
  animation: rotate-appear;
  animation-timeline: --myScroller;
}

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

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

结果

滚动粉色区域的垂直滑块，观察方块的动画。

规范

规范
滚动驱动的动画
# propdef-timeline-scope

浏览器兼容性

BCD 表格只能在启用 JavaScript 的浏览器中加载。

另请参见