静态营销页与文档站仍大量依赖滚动视差、阅读进度条与章节入场动画；传统做法用 scroll 事件、IntersectionObserver 与 requestAnimationFrame 拼出时间轴，既增加包体积，又在移动端 Safari 上更容易出现卡顿。CSS 滚动驱动动画（scroll-timeline、animation-timeline、视图时间线 view()）把「滚动进度 → 关键帧」交给合成器，在 Eleventy、Hugo、Astro 静态输出等「一次编译、无运行时打包器」场景里尤其划算。本文面向必须在真实 Safari/WebKit 上签字的团队：先读 View Transitions 与静态多页站点 了解整页过渡，再对照 Safari Technology Preview 与稳定版差异，避免把只在单一渠道复现的问题误判为自家 CSS。
静态站点为何需要时间线
命令式滚动代码常在读取几何信息时触发同步布局，Wi‑Fi 不稳定导致字体晚到又会改变文档高度，进度计算随之漂移。把时间线声明在 CSS 中，浏览器能在 eligible 情况下把动画调度到合成线程，减少主线程抖动。对合规与采购友好的静态站团队而言，这意味着更少的客户端脚本、更清晰的「表现 vs 行为」边界：滚动入场、淡入淡出交给时间线；购物车抽屉、同意横幅与埋点仍用 JavaScript。
公开文档类站点的遥测在 2026 年初仍显示约 5–8% 桌面会话停留在不支持完整 scroll-timeline 的组合上——足够大，必须做渐进增强；也足够小，产品会坚持要动效。请准备静态降级：不支持的浏览器保持不透明与恒等变换，而不是再写一套动画 runtime。
scroll-timeline 与视图时间线
滚动时间线把动画进度绑定到某个滚动容器的滚动距离，可以是根滚动条或具名 overflow 区域。视图时间线则关注目标元素在滚动口中的可见比例，适合「区块滚入视口才淡入上浮」这类过去要为每个 section 配观察者的模式。配合 animation-range，你可以裁剪「哪一段滚动距离映射到 0%–100% 关键帧」，等价于过去手写的 scrollY / (docHeight - innerHeight)，但由布局系统维护一致性。
无障碍方面务必同时检测 prefers-reduced-motion: reduce：减弱动效用户应看到可读、稳定的排版，而不是被禁用脚本后卡在半透明状态。设计系统文档里请明确：哪些滚动效果是「装饰」，哪些是「信息必要」，后者需要非动画等价物。
最小示例（静态可粘贴）
下面示例用于在 Web Inspector 中快速试验；生产环境请放进编译后的样式表以便缓存与压缩。
.reveal {
animation-name: fade-slide;
animation-duration: 1s;
animation-timing-function: linear;
animation-timeline: view();
animation-range: entry 0% cover 40%;
}
@keyframes fade-slide {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}多个章节复用同一 class 时，每个元素会获得各自的视图时间线实例，比为每个节点分配唯一 data-* 再在 JS 里注册观察者简洁得多。若要做整页阅读进度条，可改用绑定到根滚动条的时间线，并把 animation-range 覆盖完整可滚动距离。
2026 浏览器与 QA 提示
| 引擎 | 滚动联动动画 | 静态 QA 提示 |
|---|---|---|
| Chromium | 成熟 | 开发者工具可 scrub 时间线，适合截图基线。 |
| Firefox | 支持（核对版本） | 对照规范示例检查 view 范围。 |
| Safari 稳定版 | 新系统上可用 | 小版本更新会改变滚动条与弹性行为，需回归。 |
| 旧移动 WebKit | 常不完整 | 用 @supports 门禁并尊重减弱动效。 |
标准演进过程中别名与草案属性曾并行存在，请在团队内部维护「构建产物实际输出」清单，避免文档与 postcss/lightningcss 结果不一致导致 QA 扯皮。
Safari 清单与云 Mac
Linux CI 无法复现 WebKit 在文档末尾弹性回弹时的合成调度，也无法 1:1 对齐苹方/西文字体亚像素与 transform 文本的抗锯齿。请每周预留 30–45 分钟 Apple 真机时间：稳定版 Safari 用于合同级签字，STP 用于二分 WebKit 回归。清单建议包含：记录 PR 中的 Safari 版本号、在 100%/125%/150% 缩放与嵌套 overflow:auto 侧栏下验证、打印样式下不得残留半透明。
若采购卡住实体机，可短期租用 Apple Silicon Mac mini 云主机，SSH 部署、VNC 操作 Safari，按天计费约 $16.9/天，比寄送借用机更省时间。试验 WebKit 实验标志前先做磁盘快照，避免偏好设置损坏影响下一轮验收。
运维提示：预览环境请镜像生产 Content-Security-Policy 与字体域名；滚动联动动效会放大行高不一致带来的「卡顿感」，即便根因只是晚到的 web font。
团队协作上，可为每次涉及滚动时间线的合并请求附上 30–60 秒录屏：展示 Chromium 与 Safari 同一 URL 的滚动对比，并在说明里写出构建工具版本与压缩后的 CSS 片段哈希。支持同事遇到客户投诉时，就能快速判断是 WebKit 小版本、内容安全策略，还是 CMS 注入了额外内联样式破坏了时间线作用域。
常见问题
CSS 滚动驱动动画能完全替代 JavaScript 滚动监听吗？
不能替代所有场景。纯视觉滚动效果可以交给时间线；埋点、复杂手势、与业务状态同步仍需要 JavaScript。把 CSS 当作表现层，把 JS 当作行为与数据层。
2026 年 Safari 对 scroll-timeline 的支持要注意什么？
请以 caniuse、WebKit 发行说明与当前 STP/稳定版为准逐版核对；旧版 iOS WebKit 可能不完整，需要 @supports 降级。
没有实体 Mac 能验准滚动动画吗？
自动化 WebKit 冒烟有帮助，但弹性滚动、字体渲染与合成器调度与真机仍有差异；建议每周留 30–45 分钟真机或租用云 Mac mini 做 VNC 目视验收。
Mac mini 仍是 WebKit 滚动与字体的「安静基准机」：Apple Silicon 功耗低、Safari 可长时间开着的温度压力小。MacHTML 提供带 SSH/VNC 的裸金属租用，静态站团队可在冲刺期拉起环境、录屏留证、通过后即释放，无需新增固定资产。