scrolltimeline 是 css 动画中将进度绑定于滚动位置的时间轴，chrome 125+ 默认支持，firefox/safari 不支持；需用 @scroll-timeline 定义并配合 animation-timeline 声明，依赖有效滚动容器且不兼容 body。
ScrollTimeline 是什么，现在能直接用吗
ScrollTimeline 是 CSS 动画规范中定义的一种时间轴类型，它把动画进度绑定到滚动容器的滚动位置，而不是时间。但注意：目前（2024 年中）它仍处于实验性阶段，Chrome 125+ 默认启用，Firefox 和 Safari 完全不支持，且需配合 animation-timeline 和 @keyframes 使用。
- 不是 JavaScript API，不能用
new ScrollTimeline()实例化（那是旧草案写法，已废弃） - 不依赖 JS 驱动，纯 CSS 声明式控制，但必须配合
scroll-behavior: smooth或容器有明确滚动上下文 - 若在不支持的浏览器中使用，动画会直接 fallback 为无 timeline 的常规播放（即按时间播），不会报错，但效果失效
怎么声明一个可用的 ScrollTimeline
核心是用 @scroll-timeline 规则定义，且必须指定 source（滚动容器）和 orientation（方向）。常见错误是漏掉 source 或用了 body 作为源——body 在多数情况下不是可滚动容器（实际是 document.scrollingElement，通常是 html 元素）。
@scroll-timeline fade-in-timeline {
source: selector(#scroller);
orientation: vertical;
start: 0px;
end: 100vh;
}
-
source必须指向一个具有溢出滚动的元素（如overflow-y: scroll），不能是body或未设置高度/溢出的元素 -
start/end接受长度值（px,vh）或nearest/farthest关键字，但不支持百分比（如50%会无效） -
orientation必须显式声明vertical或horizontal，不能省略
怎么把 Timeline 绑定到动画上
靠 animation-timeline 属性，值为 @scroll-timeline 的名称。关键点在于：该属性必须和 animation-name 出现在同一选择器中，且不能被层叠覆盖。
.card {
animation-name: fade-in;
animation-timeline: fade-in-timeline; /* 必须同级声明 */
animation-fill-mode: backwards;
}
<p>@keyframes fade-in {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}</p>
- 如果用
animation简写属性，animation-timeline不会被包含进去，必须单独写 -
animation-duration、animation-delay等时间相关属性会被忽略（timeline 自己控制节奏） -
animation-fill-mode: backwards很重要：否则元素在滚动到起点前就显示默认状态，失去“随滚动渐显”效果
为什么加了没反应？常见卡点
最常踩的坑不是语法错，而是滚动上下文缺失或层级干扰：
- 滚动容器（
source指向的元素）没有设置height+overflow-y: scroll，或者其内容高度不足以触发滚动 - 容器设置了
overscroll-behavior: contain或scroll-margin类属性，意外截断了滚动事件传播 - 动画元素本身
position为fixed或absolute，脱离文档流后，其滚动位置计算可能异常（建议优先对相对定位元素使用） - 开发者工具里看不到 timeline 生效：Chrome DevTools > Rendering > “Scroll timelines” 需手动勾选才能在 Elements 面板中看到绑定关系
真正麻烦的地方不在写法，而在于它要求你同时理清三层关系：滚动源的尺寸与行为、timeline 的起止映射、动画帧的语义表达。少一层对齐，效果就断掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
