CSS 滚动驱动动画怎么做：animation-timeline、view() 与降级验收

产品详情页有一条阅读进度线，设计稿要求用户滚到某个章节时，章节标题和卡片逐渐显现。很多实现会在 scroll 事件里反复读取 getBoundingClientRect()，再手动计算百分比、写入 CSS 变量，滚动快一点就容易出现抖动和主线程压力。CSS 滚动驱动动画可以把这条“视口进度”直接交给浏览器，先用 animation-timeline: view() 做一个不依赖滚动监听的章节入场效果。

先看传统 scroll 监听为什么会变重

最容易维护的旧写法，通常是给每个章节注册滚动回调，计算元素顶部和视口高度的关系，再把结果写回 --progress：

const card = document.querySelector('.chapter-card');

function updateCard() {
  const box = card.getBoundingClientRect();
  const progress = Math.min(1, Math.max(0, (innerHeight - box.top) / (innerHeight + box.height)));
  card.style.setProperty('--progress', progress.toFixed(3));
}

addEventListener('scroll', updateCard, { passive: true });
updateCard();

这段代码不一定马上出故障，但它把布局读取、进度计算和样式写入都绑在了高频事件上。章节一多，还要处理节流、组件卸载、嵌套滚动容器和快速滚动时的中间状态。对于“元素出现多少就动画多少”这种纯视觉关系，优先看看浏览器是否能直接提供时间线。

用 view() 把元素可见进度交给关键帧

下面是一个最小的章节卡片示例。关键点是先声明普通的 animation，再在后面指定 animation-timeline: view()：

.chapter-card {
  opacity: 0;
  transform: translateY(28px);
  animation: chapter-reveal linear both;
  animation-timeline: view();
  animation-range: entry 10% cover 35%;
}

@keyframes chapter-reveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

view() 创建的是视图进度时间线：卡片从接近滚动区域边缘进入，到它经过可视区域，时间线会从低进度走向高进度。animation-range 让动画只在指定区间发生，避免卡片刚碰到视口就瞬间完成。这里的 entry、cover 是时间线范围名，实际效果要结合卡片高度和视口尺寸在浏览器里确认。

animation 的声明顺序和范围边界要单独检查

这类代码有一个不明显的坑：animation 简写会重置相关动画属性。如果把 animation-timeline 写在简写前面，后面的简写可能把它覆盖掉，结果页面仍会播放动画，但它跟时间流逝走，不再跟随滚动。工程上建议把时间线相关声明集中放在简写之后：

.chapter-card {
  animation: chapter-reveal 1ms linear both;
  animation-timeline: view(block 10% 30%);
  animation-range: entry 0% cover 40%;
}

/* 只在章节容器需要滚动时，把它作为明确的滚动上下文 */
.article-scroller {
  overflow-y: auto;
  block-size: 70vh;
}

时间线不是“页面上任何滚动都能触发”。view() 默认追踪最近的滚动祖先；如果外层页面和文章内容各自能滚动，卡片到底跟随哪一个容器，要通过 DevTools 和实际滚动动作确认。不要只拖动页面滚轮就判断实现正确，最好分别滚动页面、文章容器和键盘焦点所在区域。

降级路径要让内容不依赖动画

当前滚动驱动动画仍不是所有浏览器都稳定支持。默认样式应当就是用户能阅读的状态，支持该特性时再覆盖成动画初始态；如果把 opacity: 0 写在无条件规则里，不支持时间线的浏览器可能把整篇章节隐藏掉。

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

@supports (animation-timeline: view()) {
  .chapter-card {
    opacity: 0;
    transform: translateY(28px);
    animation: chapter-reveal 1ms linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 35%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chapter-card {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

这里的原则很简单：特性检测只负责打开增强层，减少动效偏好则直接取消运动；两条路径都不能影响章节内容的可读性、焦点顺序和键盘滚动。

上线前用四个状态确认时间线真的生效

• 首屏加载：不支持滚动时间线的浏览器仍能直接看到章节内容，不出现整页透明。
• 慢速滚动：卡片从进入区间到覆盖区间连续变化，而不是只在滚动结束时跳变。
• 嵌套容器：页面滚动和文章滚动分别测试，确认动画跟随的是预期的最近滚动容器。
• 减少动效：打开系统减少动态效果后，内容立即可见，不能依赖动画结束事件解锁。

如果动画看起来完全没有反应，先检查 animation-timeline 是否被简写覆盖，再检查元素是否真的进入了能产生滚动进度的容器，以及 animation-range 是否把可见区间设得过窄。不要第一时间把关键帧改得更复杂。

常见问题

view() 和 scroll() 最大区别是什么？

view() 关注被动画元素在滚动容器里的可见进度，适合卡片和章节进入视口；scroll() 关注滚动容器本身走了多少距离，适合顶部进度线或滚动比例指示器。

为什么动画简写写了以后 view() 失效？

常见原因是 animation-timeline 写在 animation 简写之前，被简写重置了。把时间线和范围声明放到简写之后，并在 DevTools 里确认最终计算样式。

不支持滚动驱动动画时必须加载 polyfill 吗？

不必默认加载。只要默认样式已经保证内容可见，动画只是增强效果；只有产品确实把进度状态当成业务功能时，才需要单独评估脚本兜底的性能和维护成本。

滚动驱动动画会替代 IntersectionObserver 吗？

不会完全替代。需要在元素进入后触发数据加载、埋点或业务状态改变时，仍应使用合适的脚本观察逻辑；纯视觉动画则可以优先交给 CSS 时间线。

结尾：让滚动关系回到浏览器擅长的地方

animation-timeline: view() 的价值不是少写一段事件监听，而是把“元素在滚动容器里的位置”变成动画本身的进度来源。落地时先用最小关键帧确认时间线，再校对声明顺序、最近滚动祖先和范围边界，最后用 @supports 与 reduced-motion 保护默认可读状态，滚动体验才不会和兼容性、无障碍互相牵制。