Chrome 115+ 和 Edge 115+ 原生支持 scroll-timeline 和 animation-timeline，但需手动启用 chrome://flags/#scroll-driven-animations；Firefox 仅 Nightly/Beta 实验性支持且不稳定；Safari 17.4+ 仅支持 animation-timeline: scroll(root) 垂直滚动，不支持自定义 timeline；@supports 必须分层检测 scroll(root) 和 scroll-timeline-name，并包裹全部相关 CSS 规则。
Chrome 115+ 和 Edge 115+ 可直接用，但需确认启用状态
这两个浏览器原生支持 scroll-timeline 和 animation-timeline，但不是所有用户都默认开启。尤其 Chrome 115–119 某些企业版或旧配置可能禁用该特性。
验证方法：打开 DevTools → Elements 面板 → 选中目标元素 → 在 Styles 面板添加 animation-timeline: scroll();，如果该属性被划掉或无效果，说明未启用。
- 手动开启路径（Chrome）：
chrome://flags/#scroll-driven-animations→ 启用「Scroll-driven animations」 - Edge 类似，访问
edge://flags/#scroll-driven-animations - 不建议生产环境依赖用户手动开启，必须配合
@supports降级
Firefox 仍需 about:config 手动开启，且不稳定
截至 2026 年 7 月，Firefox 仅在 Nightly 和部分 Beta 版本中实验性支持，稳定版默认关闭，且 @scroll-timeline 规则解析常出错。
关键限制：即使开启 layout.css.scroll-driven-animations.enabled，scroll() 函数对 root 容器的支持也不完整，容易 fallback 到静止状态。
立即学习“前端免费学习笔记（深入）”；
- 测试时务必检查
@scroll-timeline是否被解析（Elements → Computed → 查看 timeline 相关计算值） - 避免在 Firefox 中使用
source: selector(body)，它几乎总失败；改用显式滚动容器 - 目前不建议将 Firefox 列入 scroll-driven 动画的首推支持列表
Safari 17.4+ 仅支持 vertical 滚动 + scroll(root)，不支持自定义 timeline
Safari 的实现最保守：只认 scroll(root)，且仅限垂直方向；@scroll-timeline 自定义时间轴完全不识别，animation-range 也受限。
这意味着你写 animation-timeline: --progress; 或 scroll(nearest block) 在 Safari 里会静默失效，连 @supports (animation-timeline: --t) 都返回 false。
- 实际可用写法只有：
animation-timeline: scroll(root); - 进度条类效果只能绑定到整个页面滚动，无法限定在某个局部容器
- 若需局部滚动驱动，Safari 下必须回退到 IntersectionObserver + requestAnimationFrame
@supports 不能只测 animation-timeline，还要测 scroll() 函数
@supports (animation-timeline: --t) 在 Safari 17.4+ 返回 false，但它其实能跑 scroll(root)；反过来，Firefox 开启后支持 @scroll-timeline 却不认 scroll() 函数。
真正可靠的检测方式是分层判断：
- 先测
@supports (animation-timeline: scroll(root))—— 这才是 Safari 实际支持的最小单元 - 再测
@supports (scroll-timeline-name: --t)判断是否支持自定义 timeline（Chrome/Edge 有，Safari/Firefox 无） - 任何一条不通过，就走 JS fallback 路线，别试图“部分启用”
最易忽略的是：很多人写了 @supports 却只包裹 @keyframes 和动画声明，没把 @scroll-timeline 规则也包进去，结果 CSS 解析失败直接报错。
