scroll-timeline需滚动容器、时间轴定义、动画绑定三者配合；Chrome/Edge 115+原生支持，Firefox需开启flag且受限，Safari当前完全不支持。
scroll-timeline不是“引入”就能用的 CSS 功能，它是一套需完整配合的机制：滚动容器、时间轴定义、动画绑定三者缺一不可。Chrome/Edge 115+ 可直接用，Firefox 需手动开启 flag 且功能受限，Safari 当前（2026 年 5 月）完全不支持 —— 如果你刚写完发现没反应，先查浏览器，不是代码错了。
animation-timeline: scroll() 能不能直接用
能，但仅限最简场景，且有硬性前提：
-
scroll()必须作用在有明确滚动行为的元素上，比如设置了overflow-y: scroll+ 固定height的容器；body或html多数情况下不被识别为有效scroller - 参数如
scroll(root)仅在根滚动容器（即整个视口）有意义，但部分旧版 Chrome 对root解析不稳定，建议优先用scroll(nearest block) - 它不接受百分比单位，
start/end必须是像素值或entry/cover这类关键字，否则会被忽略 - 动画必须声明
animation-duration（哪怕设为1s），否则 Chrome 会静默降级为时间驱动动画
@scroll-timeline 规则怎么写才生效
这是最常被跳过的一步 —— animation-timeline: --my-timeline 中的 --my-timeline 必须由 @scroll-timeline 显式定义，否则整条链路断开：
-
source必须指向一个真实存在的、可滚动的 DOM 元素选择器，例如source: selector(.scroller)，不能写成source: selector(body) -
orientation推荐显式写成vertical或horizontal，避免依赖默认值导致跨浏览器行为不一致 -
start和end建议用像素偏移，比如start: 0pxend: 400px；用0%100%在容器尺寸动态变化时容易错位 - 该规则必须放在
@keyframes之后、元素样式之前，CSS 解析顺序会影响是否识别
animation-range 控制的是哪一段滚动区间
animation-range 决定的是“这个元素的动画在整体滚动时间线中占哪一段”，不是“从第几个像素开始动”。它的语法是两段式：animation-range: <start-phase><start-offset><end-phase><end-offset></end-offset></end-phase></start-offset></start-phase>：
-
entry 0%表示元素**进入视口起点**时触发，cover 100%表示**完全覆盖视口终点**时结束 —— 这两个阶段和@scroll-timeline的start/end是正交的 - 常见组合：
animation-range: entry 20% entry 80%让淡入效果只发生在元素刚露头到快消失之间，避免顶部/底部突兀出现 - 如果省略
animation-range，动画默认覆盖整个时间线（0% → 100%），但实际可见范围仍受元素自身位置限制 - 注意：Chrome 119+ 已废弃
scroll-timeline-range，别把它和animation-range混用
scroll-timeline 和 view-timeline 容易混淆的点
两者都用 animation-timeline 绑定，但参照系完全不同：
-
scroll-timeline关心的是“容器滚了多远”，适合进度条、视差背景、阅读指示器这类**全局滚动状态映射**的场景 -
view-timeline关心的是“元素自己进了/出了视口多少”，适合卡片逐个浮现、标题吸顶切换、懒加载触发动画等**基于元素可见性**的交互 - 不要试图用
scroll-timeline实现“滚动到某区域才开始动”，那是view-timeline的本职；反过来，也别用view-timeline做滚动进度条，它没有全局滚动坐标概念 - 目前（2026 年 5 月）
view-timeline在 Safari 中支持度略好于scroll-timeline，但仍有前缀差异
真正卡住项目的往往不是语法写错，而是把 scroll-timeline 当成“自动监听滚动”的黑盒 —— 它不提供 onScrollEnd、不暴露 scrollWidth、也无法判断是否可滚动。需要条件逻辑或 DOM 状态更新的地方，JS 仍是唯一可靠路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
