DigitalOcean 为您的旅程的每个阶段提供云产品。从 免费的 200 美元信用额度 开始！
CSS 的 view-timeline-name 属性允许我们根据元素进入滚动容器（也称为“源”）的可见区域（即视窗）时的滚动位置来识别和引用要动画的元素。
.element {
view-timeline-name: --image-zoom;
}这是一种声明式方式来触发滚动动画；否则，元素（也称为“主题”）将在进入其最近具有滚动容器的祖先的视窗时开始其基于滚动的动画。
view-timeline-name 属性也可以使用 view-timeline 属性声明，view-timeline 属性是将 view-timeline-name 和 view-timeline-axis 组合在一个声明中的简写。
.element {
view-timeline: --image-zoom y;
/* Equivalent to: */
view-timeline-name: --image-zoom;
view-timeline-axis: y;
}语法
view-timeline-name: [ none | <dashed-ident> ]#- 初始值：
none - 应用于： 所有元素
- 继承： 否
- 百分比： N/A
- 计算值：
none或 CSS 标识符 列表 - 规范顺序： 按语法
- 动画： 不可动画
属性值和描述
/* Keyword value: none */
view-timeline-name: none;
/* <dashed-ident> examples */
view-timeline-name: --my-timeline;
view-timeline-name: --myTimeline;
view-timeline-name: --my_timeline;none: 时间线没有名称。<dashed-ident>: 给定给查看进度时间线的一个自定义名称，如<custom-ident>，它以声明式的方式标识它，并将其与其他时间线区分开来。该值被称为“虚线”标识符，因为它必须以两个破折号 (--) 为前缀，就像我们对 CSS 自定义属性 所做的一样，例如--image-zoom。
滚动进度时间线与查看进度时间线
区别可能很小，但滚动进度时间线是在当前视窗中可见的元素上要运行的动画，即其滚动位置，无论垂直滚动（y 轴）还是水平滚动（x 轴）。当元素到达滚动位置时，动画触发并在滚动容器结束时完成。换句话说，它是一个从0% 进度到100% 的动画时间线，随着用户滚动而进度，而典型的动画时间线通常在页面渲染完成后发生。
这与查看进度时间线不同，查看进度时间线是滚动进度时间线的片段或部分。换句话说，查看进度时间线有点像滚动进度时间线的点火启动，在元素（即“主题”）当前处于可见状态时触发滚动进度时间线。
因此，我们谈论的是一个滚动进度时间线，它作用于元素在当前视图中的可见性。一旦元素的起始边缘与最近的祖先的视窗相交 - 这是一种表示“滚动容器的可见部分”的更复杂说法 - 动画就会传递给滚动进度时间线，并通过用户沿设置的任何轴（x 或 y）的滚动而进行。
只要 <body> 元素溢出当前视图，它就可以被视为一个滚动容器。这意味着我们可以在元素要动画的元素进入 <body> 的可见区域时触发或开始动画，之后，动画将根据元素的滚动位置进行。
一些术语
值得注意的是，规范使用了一些特定的词语来描述滚动进度时间线的各个部分。
- 主题： 我们要动画的元素。
- 源： 主题的最近祖先（如父级或祖父母级），具有触发并包含动画的滚动容器，直到主题的起始边缘与源的结束边缘相交。
我们有这种上下文真的很酷，所以我们将在整个过程中继续使用这些术语。
这是一种声明式方式来定义查看进度时间线
我们不必为查看进度时间线命名。如果我们不命名它，它被称为匿名时间线，我们要动画的主题会在与它最近的源相交时进入进度时间线。换句话说，当元素进入它遇到的第一个滚动容器的可见部分时，动画被触发。
相反，我们可以使用 view-timeline-name 属性明确地为查看进度时间线提供一个标识名称，以建立一个可以通过名称调用和引用的声明式时间线。当我们希望主题的动画在进入超特定源的可见区域时启动时，我们会使用它。
使用 view() 的匿名查看进度时间线
即使我们决定不使用 scroll-timeline-name 显式地命名查看进度时间线，仍然可以使用 view() 函数配置查看时间线行为。该函数不接受 scroll-timeline-name 参数，但它会指示浏览器当主题与源相交时主题应该做什么。
.subject {
animation-timeline: view(y 10dvh);
}因此，即使在主题元素上没有设置明确的 view-transition-name，我们仍然可以指示动画在哪个 view-timeline-axis 上运行，并使用 view-timeline-inset 参数精确地调整动画的启动时间。
规范
view-timeline-name 属性在 滚动驱动动画模块级别 1 规范 中定义，该规范目前处于编辑草案状态，截至撰写本文时。这意味着该工作正在讨论中，并且在提案成为正式候选推荐之前可能会发生变化。
浏览器支持
| IE | Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| 否 | 115 | 115 | 111 | 否 | 101 |
| iOS Safari | Android Chrome | Android Firefox | Android 浏览器 | Opera Mobile |
|---|---|---|---|---|
| 否 | 125 | 否 | 125 | 80 |
来源： caniuse（于 2024 年 5 月 30 日检索）
