scroll-timeline 是 CSS 滚动驱动动画的核心机制，将滚动进度映射为时间轴；Chrome 115+/Edge 115+ 原生支持，Firefox 需启用 flag 且仅限基础属性，Safari 完全不支持。
scroll-timeline 是什么，浏览器支持到哪一步了
scroll-timeline 是 CSS 新增的滚动驱动动画核心机制，它把滚动容器的滚动进度映射为一个时间轴，让 @keyframes 动画能随滚动自然播放。但它不是所有浏览器都可用：Chrome 115+、Edge 115+ 原生支持；Firefox 和 Safari 当前（2024 年中）仍需前缀或完全不支持。
- Chrome/Edge 中可直接用
scroll-timeline: --my-timeline;+@scroll-timeline规则 - Firefox 需启用
layout.css.scroll-driven-animations.enabled标志（about:config），且仅支持scroll-timeline-name等基础属性 - Safari 完全未实现，
@scroll-timeline会被忽略，animation-timeline也不识别
如果你在 Safari 里看到动画不动，不是代码写错，是它压根没解析这条规则。
怎么写一个最简可用的 scroll-driven 动画
关键不在“炫”，而在“能跑通”。最小闭环包含三部分：滚动容器（scroller）、时间轴定义（@scroll-timeline）、绑定动画（animation-timeline）。
<div class="scroller">
<div class="target">向下滚动看我动</div>
</div>
<p><style>
.scroller {
overflow-y: scroll;
height: 300px;
}
.target {
animation: fade-in 1s;
animation-timeline: --vertical-timeline; /<em> 绑定时间轴 </em>/
}</p><p>@keyframes fade-in {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}</p><p>@scroll-timeline --vertical-timeline {
source: selector(.scroller);
orientation: vertical;
start: 0px;
end: 300px;
}
</style></p>注意点：
立即学习“前端免费学习笔记（深入）”；
-
.scroller必须有明确的overflow-y: scroll（或auto）和固定高度，否则滚动无法触发 timeline -
@scroll-timeline的source必须指向实际可滚动的元素，不能是body（多数浏览器不认body为有效 scroller） -
start/end推荐用像素值而非百分比，避免因容器尺寸动态变化导致 timeline 错位
animation-range 和 scroll-timeline-range 怎么配合用
这两个属性决定动画在滚动轴上的“生效区间”，但容易混淆：
-
animation-range写在动画元素上，表示该元素的动画占整个 timeline 的哪一段（比如animation-range: entry 0% entry 100%;） -
scroll-timeline-range是@scroll-timeline里的属性，定义 timeline 自身的有效滚动范围（已废弃，Chrome 119+ 起只认start/end）
真正该用的是：
-
animation-range: 0% 100%;—— 动画从 timeline 0% 播到 100% -
animation-range: entry 0% entry 100%;—— 动画从元素进入视口开始播，到完全离开视口结束（依赖 IntersectionObserver 行为） -
animation-range: cover 0% cover 100%;—— 元素始终在视口内时全程播放
常见翻车点：
- 把
animation-range写成0 100%（缺单位）→ 无效，必须是0%或entry 0% - 在未设置
scroll-timeline的情况下单独写animation-range→ 浏览器忽略，无报错也无效果 - 用
cover但元素本身高度 > 容器高度 → timeline 无法覆盖完整滚动过程，动画卡在中间
为什么加了 scroll-driven 动画却没反应
绝大多数问题出在「滚动源不可见」或「timeline 未激活」：
- 检查滚动容器是否真的在滚动：给
.scroller加border: 1px solid red;和height，确认它不是被内容撑开、而是主动设置了溢出 - 打开 DevTools → Elements → 选中目标元素 → 查看 Computed 面板里是否有
animation-timeline计算值，若显示none，说明 timeline 名字拼错或未定义 - Chrome 中可在 Rendering 面板勾选 “Scroll timeline visualization”，能看到 timeline 进度条是否随滚动移动
- 若用
source: selector(body)，改用具体容器（如main或带id="scroller"的 div），body不被多数引擎视为合法 scroller - 动画本身被其他样式覆盖（比如
opacity: 0写在后面），优先级高于 keyframes → 用 DevTools 检查最终 computed opacity/transform 是否真在变
滚动驱动动画的调试不像传统 CSS 那样靠刷新就能重来，它的状态强依赖滚动位置和 timeline 绑定关系。动不了时，先盯住 timeline 是否“活”，再看动画是否“绑对”。
