结论：animation-timeline: scroll() 或 view() 可行，但90%失效源于滚动上下文未成立——不报错却静默不执行；需确保目标元素处于真实可滚动容器中，优先用 selector(html) 定义命名时间线并配 animation-range 精确控制区间。
直接说结论：用 animation-timeline: scroll() 或 animation-timeline: view() 是可行的，但 90% 的失效不是写错了，而是滚动上下文没成立——它不报错，只是静默不执行。
为什么 animation-timeline: scroll(root) 经常不动
浏览器默认把 scroll() 绑定到 root（即 document.scrollingElement），但现代页面里这个元素往往没有真实滚动能力：
-
html或body上写了height: 100vh; overflow: hidden→scrollHeight === clientHeight，滚动被禁用 - 外层容器用了
overscroll-behavior: contain→ 滚动事件传播被截断 - 目标元素被
position: fixed或transform隔离出滚动坐标系 →getBoundingClientRect().top不随滚动变化 - 写了
animation-timeline: scroll(body)→ Chrome 直接忽略，body不是合法 scroller
验证方法：打开 DevTools → Elements → 选中目标元素 → Computed 面板里搜 animation-timeline，如果没显示生效，基本就是上下文问题。
怎么确保滚动上下文真正存在
核心是让浏览器确认“这里确实在滚动”，而不是靠猜。最可靠的做法是显式定义一个命名时间线，并指定可滚动的源：
立即学习“前端免费学习笔记（深入）”；
- 用
source: selector(html)，比selector(body)更稳定（Chrome 明确认可html） -
start和end必须用px或vh，不能用%；例如：start: 0px; end: 100vh表示从首屏顶部滚到底部 - 避免动态内容撑高后导致基准偏移——
%值在图片懒加载后会失效，px值不会 - 临时加
outline: 1px solid red看元素是否被position: fixed隔离；用getBoundingClientRect().top在控制台实时检查是否变化
示例定义：
@scroll-timeline doc-scroll {
source: selector(html);
orientation: vertical;
start: 0px;
end: 100vh;
}
然后所有元素统一绑定：animation-timeline: doc-scroll;
animation-range 控制触发区间的关键细节
它不是“百分比进度”，而是“滚动位置偏移量”，必须配合 animation-timeline 使用才有意义：
-
animation-range: entry 0% entry 100%是view()时间线专用，表示元素从刚进视口到完全进视口 -
animation-range: 0px 300px是scroll()时间线常用写法，表示动画在滚动容器内从 0px 到 300px 区间播放 -
animation-range: contain 0% contain 100%表示元素自身在视口内可见区域从 0% 到 100%，适合视差效果 - 别漏掉
animation: name auto里的auto—— 它是滚动驱动的开关，省略就退化成普通时间动画
多个元素想同步响应同一滚动进度？不能各自写 scroll(root)，必须共用命名时间线 + 分别设 animation-range。
View Timeline 与 Scroll Timeline 的实际分工
别混用场景：
- 做「阅读进度条」「导航栏收缩」这类全局滚动响应 → 用
scroll()+ 命名时间线 - 做「卡片淡入」「标题视差」这类单个元素入场行为 → 用
view()，更轻量、无需关心滚动容器高度 -
view()不需要定义@scroll-timeline，但要求目标元素有明确的滚动祖先（通常就是html），且不能被contain: paint隔离 -
view()的animation-range支持entry/exit/cover等语义关键词，比纯数值更直观
最易被忽略的一点：所有滚动驱动动画都依赖 scroll-behavior: auto（默认值）。如果全局设了 scroll-behavior: smooth，某些浏览器会轻微干扰滚动精度，导致动画卡顿或跳帧——真要平滑滚动，建议只对锚点链接局部启用。
