能，但必须写 animation: name auto 且浏览器支持 animation-timeline（chrome/edge 115+、safari 17.4+，firefox 需开 flag）；auto 是关键开关，使动画进度实时映射滚动百分比，否则降级为 document timeline 或行为异常。
能，但必须写 animation: name auto，且浏览器要支持 animation-timeline（Chrome 115+/Edge 115+/Safari 17.4+），Firefox 需手动开启 flag。
为什么 animation: name auto 不可省略
滚动驱动动画的时长不是由秒数决定的，而是由滚动位置实时映射而来。auto 是关键开关：它告诉浏览器“这个动画的播放进度 = 当前滚动百分比”。
- 写成
animation: progress 2s→ 动画强行播完 2 秒，和滚动完全脱节 - 写成
animation: progress 100ms→ 帧率错乱，跳帧或卡顿 - 漏掉
auto，降级为 document timeline → 页面一加载就播一次，之后静默失效
animation-timeline: scroll() 的参数怎么填才生效
scroll() 看似简单，但参数错一个就会静默失败，不报错也不动。
-
scroll(root)：绑定到根滚动容器（document.scrollingElement），适用于整页纵向滚动 -
scroll(block nearest)：绑定到最近的、overflow-y: scroll的祖先容器；注意拼写是nearest，不是nearest-block或nearest-block -
scroll(root, y)或scroll(root, x)：显式声明轴向；横向滚动必须写x，否则默认按y解析 - 若容器有
overscroll-behavior: contain，可能截断滚动传播，导致时间线收不到信号
进度条必须用 transform: scaleX() 而非 width
用 width 实现进度条在滚动中会触发重排（reflow），性能差；transform: scaleX() 只走合成器层，跟手不卡顿。
- 必须加
transform-origin: 0 50%，否则缩放中心偏右，进度条从右往左“吃”进来 - 不要用
@keyframes { from { width: 0 } to { width: 100% } }—— 这种写法在部分 Safari 版本里会失效 - 推荐写法：
@keyframes progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
兼容性兜底和检测必须做
滚动驱动动画目前还不是“写了就能跑”，没做降级处理的页面在旧浏览器里会直接失去进度反馈。
- 用
@supports (animation-timeline: --t) {}包裹所有相关样式，避免污染基础样式 -
source必须指向真实可滚动元素：想绑 body 就写source: selector(html)或source: auto（仅对根生效） - DevTools 中检查
animation-timeline是否被划掉 —— 划掉=未启用或语法错误，不是代码问题就是浏览器限制 - Safari 17.4+ 仅支持垂直滚动，横向
scroll(root, x)在 Safari 里仍无效
最易忽略的一点：滚动容器必须有明确的滚动上下文。比如 body 默认可滚动，但若项目用了 height: 100vh; overflow: hidden 搞全屏布局，又没给子容器设 overflow-y: scroll 和固定高度，那 scroll(block) 就永远找不到 source。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
