滚动驱动动画仅在Chrome/Edge 115+稳定，Firefox需开flag，Safari 17.4+仅支持垂直滚动；必须用animation-timeline: scroll(root)等带参数写法，配合animation: name auto和完整@keyframes，并通过@supports检测降级。
能用，但只在 Chrome/Edge 115+ 稳定工作；Firefox 需手动开 flag，Safari 17.4+ 仅支持垂直滚动且行为受限；生产环境必须降级。
animation-timeline: scroll() 必须带参数才生效
写 animation-timeline: scroll() 是无效的——Chrome 会静默忽略，动画退化为普通时间轴。必须明确滚动源和方向：
-
scroll(root)：绑定整页滚动（document.scrollingElement），适用于body或html可滚场景 -
scroll(block nearest)：就近匹配最近的overflow-y: scroll祖先，但目标元素不能是它的直系子元素（中间至少隔一层div） -
scroll(root, y)或scroll(root, x)：显式指定轴向，横向滚动必须写x，否则默认按y解析
漏括号、拼错 nearest-block、或容器没设 height/max-height，都会导致动画完全不触发。
必须用 animation: name auto，不能写固定 duration
滚动驱动动画的时长由滚动进度决定，不是你写的秒数：
- ✅ 正确：
animation: progress auto linear forwards——auto告诉浏览器“进度 = 滚动百分比” - ❌ 错误：
animation-duration: 2s或animation: progress 2s—— 动画强行播完 2 秒，与滚动脱节 - ❌ 错误：
animation: progress 0s—— 浏览器直接跳过动画
@keyframes 里仍要写 0% 和 100%（不能只用 from/to），否则 Chrome 不识别进度映射。
@supports 检测 + 降级方案不能省
没有检测就上 animation-timeline，Firefox/Safari 用户看到的是静止动画或默认播放：
- 用
@supports (animation-timeline: --t) {}包裹所有滚动驱动样式 - 降级方案推荐 IntersectionObserver：监听
target.getBoundingClientRect().top相对于滚动容器顶部的距离，手动算出0–1进度值，再绑定到transform: scaleX()或width - 避免依赖
transform: scale(0.99)或opacity: 0.99的元素做view()触发，它们可能被判定为“不可见”而跳过动画
真正麻烦的不是写法，而是滚动容器若用了 overscroll-behavior: contain，会截断滚动传播，导致 scroll() 时间线收不到信号——这个坑在复杂布局里极难排查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
