CSS scroll-timeline 结合 prefers-reduced-motion 的降级处理

滚动驱动动画最稳妥的写法，是先让页面在没有新时间线能力时仍然可读，再把 scroll-timeline 作为增强层；当用户打开减少动效偏好时，还要覆盖滚动驱动效果。不要把“浏览器支持属性”和“用户愿意看到运动”当成同一个条件。

官方资料：https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Scroll-driven_animations

先建立三层降级模型

实际项目里可以把样式拆成三层：基础层负责布局和内容可见，增强层在特性可用时绑定时间线，偏好层在用户要求减少动效时覆盖增强。这样即使滚动时间线没有生效，内容也不会依赖动画完成才能出现。

.reading-progress {
  /* 基础层：没有滚动时间线时，进度条仍保留可见高度 */
  transform: scaleX(0.35);
  transform-origin: left;
  background: #2f6fed;
}

@supports (animation-timeline: scroll()) {
  .reading-progress {
    /* 增强层：只在支持滚动时间线的环境绑定滚动进度 */
    animation: progress-grow linear both;
    animation-timeline: scroll(root block);
  }
}

@keyframes progress-grow {
  /* 关键帧只描述视觉范围，不承担内容可见性的前置条件 */
  from { transform: scaleX(0.05); }
  to { transform: scaleX(1); }
}

animation-timeline 要放在动画声明之后，避免后面的简写把时间线设置覆盖掉。这里的基础 transform 只是静态默认状态；阅读内容、标题和操作入口不能只在关键帧的终点才显示。

用 @supports 控制增强，而不是控制内容

@supports 适合回答“这条 CSS 能不能解析”，不适合承担完整的业务兼容策略。对关键内容可以保留静态样式，对非关键的透明度、位移或进度效果才增加滚动时间线。若项目仍要支持不认识该属性的浏览器，基础层必须足够完整。

.chapter-card {
  /* 默认状态不依赖动画，用户打开页面即可阅读 */
  opacity: 1;
  transform: none;
}

@supports (animation-timeline: view()) {
  .chapter-card {
    /* 增强层只改变装饰性过渡，不隐藏主体 */
    animation: card-in linear both;
    animation-timeline: view(block 10% 80%);
  }
}

@keyframes card-in {
  /* 可见性始终由基础样式保证，动画只是渐变表现 */
  from { opacity: 0.65; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

还要注意滚动源的边界：scroll(root block) 依赖根滚动容器，view() 则与元素进入滚动视口的可见范围有关。先明确动画对应哪个容器，再决定是滚动进度还是视图进度，避免把局部容器误当成页面根滚动。

减少动效偏好必须覆盖滚动驱动效果

prefers-reduced-motion: reduce 表示用户希望减少非必要运动。对滚动驱动动画，最容易遗漏的是只关闭普通的 animation-duration，却仍保留 animation-timeline。更可靠的做法是把时间线和装饰性运动一起覆盖，并把元素恢复到稳定、可读的状态。

@media (prefers-reduced-motion: reduce) {
  .reading-progress,
  .chapter-card {
    /* 用户偏好层：取消运动，保留静态内容和结构 */
    animation: none;
    animation-timeline: auto;
    transform: none;
    opacity: 1;
    transition: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* 只有用户未要求减少动效时，才启用装饰性运动 */
  .chapter-card {
    will-change: transform, opacity;
  }
}

这里的重点不是把页面做成“没有反馈”，而是把反馈从运动改成稳定的颜色、边框或位置变化。对进度条、状态徽标等元素，可以保留明确的静态差异；不要用闪烁、连续位移或自动播放去补偿被关闭的动画。

发布前按三个边界做回归

第一，关闭滚动时间线能力，确认标题、正文和操作入口仍然可见；第二，开启减少动效偏好，确认页面没有持续位移、闪烁或自动运动；第三，切换根滚动容器和局部滚动容器，确认时间线绑定对象没有混淆。兼容性资料应以目标浏览器版本的实际支持表为准，不要把某个实验性实现当成普遍能力。

可以把检查压缩成三句话：基础样式负责可读，@supports 负责渐进增强，prefers-reduced-motion 负责用户偏好。满足这三层边界后，scroll-timeline 才是锦上添花，而不是页面能否使用的单点依赖。

常见问题

为什么已经写了 @supports，动画还是不动？先确认动画简写之后是否声明了 animation-timeline，再确认滚动源和轴向是否正确；支持检测通过不等于时间线已经绑定到预期容器。

减少动效时只写 animation: none 可以吗？不建议只写这一项。滚动驱动样式还应覆盖 animation-timeline、位移和过渡，并给元素一个稳定的最终可读状态。