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.