摘要

  • W3C 2022 年 10 月首次公开的 Scroll-linked Animations 草案提出两种进度：滚动容器走了多远，以及某个元素在可视区域中走到了哪里。
  • 2023 年的 Scroll-driven Animations 草案继续细化 ScrollTimeline、ViewTimeline 与 animation-timeline，让页面位置而非秒表决定动画进度。

一篇长报道里的图表，第一次出现时按预设的两秒钟依次亮起。编辑看着满意；读者还没看清第三根柱子，表演已经谢幕。读者往上滚回图表，柱子仍停在终点。网页把故事排在一条可以来回走的空间里，却让另一只只会向前走的时钟掌管了镜头。这位导演对“再看一遍”的要求毫无兴趣。

W3C 2022 年 10 月 25 日的首份公开草案把这种思路称作 Scroll-linked Animations。它区分两种进度时间轴。滚动进度看的是容器从起点移动到终点的位置，可映射为百分比；视图进度看的是指定元素进入、穿过、离开滚动视口的过程。前者适合文章顶端的阅读进度线，后者适合藏在中段、等自己进入视野才开始说明的图。整篇文章走到哪儿，与这张图走到哪儿，是两道不同的题。

这也解释了为什么简单监听一次滚动事件远远不够。编辑真正想说的是：某个效果跟着可测量的位置走。读者停下，效果停下；读者倒退，效果倒退。浏览器知道容器滚了多少、元素现在位于哪儿，便可以把这些位置变成动画的进度。网站仍要选择要动的东西、起止范围和视觉含义。滚动条只接管节拍，没替作者写剧本。

2022 年 12 月 8 日的工作草案继续写出 CSS 的连接方式：scroll() 指向滚动进度，具名时间轴和视图时间轴让效果找到合适的来源。这里有个不太浪漫、却很重要的细节：如果容器根本没有可滚动的溢出，滚动时间轴可能不活动。没有路程，就无从谈走了几成。给一张完全不会滚动的卡片安排“滚到一半”的高潮，就像在原地不动的电梯里等三楼。

2023 年 4 月 28 日的草案改用 Scroll-driven Animations 这个标题。这个词比“与滚动关联”更直白：动画的进度由滚动或可见位置驱动。它可以通过 CSS 表达，也能接入 Web Animations 的接口；核心仍是为效果指定一条空间时间轴。动画不再消耗几秒钟，而是占据读者旅程中的一段距离。图表可以随着阅读逐格展开，图片也可以在自己的边框穿过视口时慢慢显影。

2023 年 6 月 6 日的工作草案明确写出 ScrollTimeline、ViewTimeline 及 animation-timeline 的关系。两个时间轴量的东西不同：前者量容器的滚动位移，后者量主题元素的可见旅程。编辑若把它们混为一谈，顶端的进度线可能到了尾声，中段的图才刚登场。页面位置可以是一个数字，却必须先答对“谁的位置”。

W3C 的发布记录串起 2022 年首稿与 2023 年的修订。规范解决的是共同测量：浏览器能准确报出读者走到哪儿。它不会评价每个标题都转一圈是否有助理解。把滚动交给视觉设计，既能让读者掌握节奏，也给了编辑滥用舞台烟雾的新机会。最好的演出是读者回头时，图表真的肯重演关键一步；最差的演出是每挪动一厘米，网页都要朝你鞠躬。

时钟可以下班了。读者握着滚动条，导演椅也终于转向观众。