必须写 animation: name auto，因为auto使动画时长由滚动时间线动态决定，若设为固定时长（如2s）则与滚动脱节，chrome 115+支持，firefox需开启实验标志。
直接用 animation-timeline: scroll(root) 就能实现，但必须配 @keyframes + transform: scaleX()，且不能漏掉 animation: name auto 中的 auto —— 否则动画不会随滚动实时更新进度。
为什么必须写 animation: name auto 而不是 animation-duration
auto 是滚动驱动动画的关键字，它告诉浏览器“这个动画的时长由滚动时间线动态决定”，而不是固定秒数。如果写成 animation: name 2s，动画会强行按 2 秒播完，和滚动脱节；写成 animation: name 100ms 则会卡顿或跳帧。
-
auto让动画帧率与滚动位置一一映射：滚动 10%，动画就走到 10% 关键帧 - Chrome 115+ 支持该行为，Firefox 当前需开启
layout.css.scroll-driven-animations.enabled实验标志 - 不支持时，
animation会退化为 document timeline，默认从页面加载开始播放，完全失效
scroll() 函数的参数怎么填才生效
scroll() 不是万能通配符，必须明确滚动容器和轴向，否则在多数布局下会静默失败。
-
scroll(root)：绑定到根滚动容器（document.scrollingElement），适用于整页纵向滚动 -
scroll(block)：只对overflow-y: scroll的块级容器有效，需确保该容器有明确高度和scroll-timeline-name -
scroll(root, y)和scroll(root, x)可显式指定轴向，横向滚动必须写x，否则默认按y解析 - 若容器使用
overscroll-behavior: contain，可能截断滚动事件传播，导致时间线无法响应
进度条颜色/形态随滚动分段变化的实操要点
想让进度条在不同滚动区间显示不同颜色或形状（比如 0–20% 蓝、20–60% 绿、60–100% 红），不能只靠 @keyframes 插值，得配合 clip-path 或多层叠加。
- 用
steps(3, start)配合scaleX(1)只能做“硬切”，无法平滑过渡；真正分段渐变得靠多个animation并行 + 不同animation-range - 例如：
animation-range: 0% 33%;控制第一段颜色，animation-range: 33% 66%;控制第二段，但需为每段单独定义@keyframes - 更轻量的做法是用单个
background: linear-gradient()+background-position-x动画，绑定同一scroll(root)，避免多动画同步问题 -
clip-path: inset(0 0 0 calc(100% - var(--progress, 0%)))这类动态裁剪需配合 CSS 自定义属性 +@property声明类型，否则无法动画
最容易被忽略的是兼容性兜底：没有 animation-timeline 支持时，scroll() 值会被整个忽略，但 animation 仍会按 document timeline 播放——这意味着你得用 @supports (animation-timeline: scroll(root)) 包一层，否则用户看到的是“页面一加载就闪一下”的错误效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
