CSS scroll-driven animations 怎么绑定滚动进度：timeline、范围和降级方案

产品详情页顶部的阅读进度条，过去常用 JavaScript 监听 scroll 事件再改宽度。页面一复杂，滚动和动画就容易互相抢主线程。现在可以先把动画和滚动时间线接起来：滚动容器控制整体进度，用 view() 跟踪某个元素进入视口的过程，再用 animation-range 把动作限制在真正需要的区间。

先判断：动画到底跟谁的进度走

这次改造最容易犯的错，是只记住了 animation-timeline 这个属性，却没有先判断进度来源。Scroll Progress Timeline 读取滚动容器的当前位置，从 0% 走到 100%；View Progress Timeline 读取某个元素穿过滚动容器的过程，元素进入、停留和离开时都会影响动画。

比如顶部阅读条不需要知道哪一段文章进入视口，直接绑定根滚动条即可。文章中的提示卡则更适合 view()，因为它的淡入应该和这张卡片的位置有关。

用 scroll() 做一个跟随页面的阅读进度条

先看最小版本。这里不需要 JavaScript，也不需要给动画写固定时长；浏览器会把文档滚动进度映射到关键帧：

.reading-progress {
  position: fixed;
  inset: 0 auto auto 0;
  width: 100%;
  height: 4px;
  transform-origin: left;
  transform: scaleX(0);
  background: #2d6cdf;
  animation: grow-progress linear;
  animation-timeline: scroll(root block);
}

@keyframes grow-progress {
  to { transform: scaleX(1); }
}

scroll(root block) 表示读取根滚动容器的块方向进度。要做横向滚动画廊，可改成对应的横向滚动容器和 inline 轴。检查时拖动滚动条：页面在顶部时进度条应接近 0%，滚到底部时应接近 100%。

用 view() 让卡片在进入视口时出现

View Timeline 默认跟踪元素从进入最近滚动容器到离开容器的完整过程。下面的例子让文章卡片在滚动经过时从下方移入：

.story-card {
  animation: reveal-card linear both;
  animation-timeline: view();
  animation-range: entry 15% cover 40%;
}

@keyframes reveal-card {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

这里的 entry 15% 是开始点，cover 40% 是结束点。动画不会从卡片刚出现一个像素时就跑完，而是等它进入一小段后才开始，到了覆盖滚动区域约 40% 的位置完成。both 让元素在动画区间之外保留关键帧两端的状态。

animation-range 怎么选：cover、entry 还是 exit

范围名称不是装饰词，选错后最常见的表现就是动画太早、太晚，或者离开页面时又重复播放。

• cover：覆盖整个 view progress timeline，适合持续跟随元素可见过程。
• entry：只覆盖元素进入滚动容器的阶段，适合入场淡入。
• exit：只覆盖元素离开滚动容器的阶段，适合离场淡出。
• entry-crossing / exit-crossing：关注元素跨过滚动容器边界的那一段，适合精确卡点。

如果动作需要在进入和离开时使用同一组关键帧，可以分别挂两条动画；不要为了省一行 CSS 把一个范围拉得很长，最后让用户看到半透明的卡片长期停留在页面上。

兼容性与动效偏好要留出静态路径

原生能力不应成为内容可见性的前置条件。把核心内容正常排版，动画只做增强；不支持时让卡片直接显示，支持时再添加滚动效果：

.story-card {
  opacity: 1;
  transform: none;
}

@supports (animation-timeline: view()) {
  .story-card {
    animation: reveal-card linear both;
    animation-timeline: view();
    animation-range: entry 15% cover 40%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-card,
  .reading-progress {
    animation: none;
    transform: none;
  }
}

验收分三步：不支持该特性的浏览器仍能读到内容；支持的浏览器滚动时动作与元素位置一致；系统开启减少动态效果后不再产生位移和持续进度动画。这里别急着补一套复杂 polyfill，先看这段增强效果是不是业务必须。

常见问题

scroll() 和 view() 可以互换吗？

不能。scroll() 看滚动容器的滚动偏移，view() 看目标元素在最近滚动容器中的可见进度。前者适合整页进度，后者适合元素入场和离场。

为什么写了 animation-timeline 却没有动画？

先检查滚动容器是否真的可滚动，再确认动画没有被后面的 animation 简写覆盖，并用 @supports 判断当前浏览器是否支持对应时间线。

animation-range 可以只写一个值吗？

可以。只写 entry 等同于把起止点设为同一个命名范围的 0% 和 100%；需要更细的开始、结束位置时再写成两个范围和值。

生产页面还需要保留 JavaScript 方案吗？

如果效果依赖复杂业务状态、需要精确控制交互或覆盖旧浏览器，仍可以保留 JavaScript 方案。原生 CSS 更适合可声明、与滚动进度直接对应的动效。

把动效当作增强层验收

一个可靠的滚动动画实现，关键不在于关键帧有多花，而在于时间线、范围和降级路径都能解释清楚。先用 scroll() 或 view() 选对进度来源，再用 animation-range 收紧动作边界，最后用支持检测和减少动效媒体查询完成验收，页面即使关闭动画也应保持可读、可操作。