当前位置：首页 > 文章列表 > 文章 > 前端 > CSS scroll-driven animations 怎么绑定滚动进度：timeline、范围和降级方案

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

来源：17golang原创 2026-08-27 11:17:20 0浏览收藏

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

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

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

前端滚动动画中 scroll 时间线与 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 让元素在动画区间之外保留关键帧两端的状态。

CSS animation-range 将卡片进入视口动作限制在 entry 到 cover 区间并检查降级状态

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，先看这段增强效果是不是业务必须。