ScrollTimeline 构造函数不可直接调用，必须通过 CSS @scroll-timeline 规则定义时间线并配合 animation-timeline 引用；需指定有效 scroll-source（带 overflow 的内部容器）、orientation（vertical/horizontal）、start/end，且须搭配 animation-range 映射滚动区间。
ScrollTimeline 构造函数不支持直接调用
你无法用 new ScrollTimeline() 创建实例——它没有公开的构造函数。浏览器目前只允许通过 CSS @scroll-timeline 规则定义时间线，再在 animation-timeline 中引用。试图写 new ScrollTimeline({ source: elem }) 会抛出 TypeError: Illegal constructor。
这是规范刻意设计：ScrollTimeline 是 CSS 驱动的声明式时间线，不是 JS 可实例化的类。所有绑定都得走 CSS 路径。
@scroll-timeline 必须配合 scroll-source 和 orientation 使用
定义滚动时间线时，scroll-source 指定滚动容器（如 #container），orientation 决定是垂直还是水平滚动（vertical 或 horizontal）。漏掉任一属性，时间线不会生效，动画会退回到默认时间轴。
常见错误：
-
scroll-source指向的元素没设置overflow: auto或scroll，导致无滚动行为 - 用
orientation: block（旧草案名）——必须用vertical或horizontal - 滚动容器本身高度不足，无法触发滚动，时间线全程卡在 0%
示例正确写法：
@scroll-timeline reveal-timeline {
source: #container;
orientation: vertical;
start: 0;
end: 100%;
}
animation-timeline 绑定后需配 animation-range 才能对齐滚动位置
仅设 animation-timeline: reveal-timeline 不够。动画关键帧仍按 0%→100% 运行，但时间线本身可能从滚动 20% 开始、到 80% 结束。要用 animation-range 显式映射动画区间到滚动区间。
比如让动画在容器滚动到 30%～70% 之间播放：
.item {
animation-name: fade-in;
animation-timeline: reveal-timeline;
animation-range: 30% 70%;
}
注意：animation-range 的单位是滚动进度百分比（相对于 @scroll-timeline 的 start/end），不是视口或文档高度。
滚动容器需有明确尺寸和 overflow，且不能是 body 直接滚动
ScrollTimeline 当前不支持根滚动（即 html 或 body 作为 scroll-source）。必须用一个带 overflow: auto 或 scroll 的内部容器，并显式设高（如 height: 600px 或 max-height）。
否则即使 CSS 写对了，动画也不会响应滚动。调试时可临时加边框和背景色确认容器是否真在滚动：
#container {
border: 2px solid red;
background: rgba(0,0,0,0.05);
height: 50vh;
overflow-y: auto;
}
另外，Safari 尚未支持 ScrollTimeline（截至 Safari 17.4），Chrome/Edge 115+ 稳定可用，Firefox 仍为实验性（需 about:config 启用 layout.css.scroll-timeline.enabled）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
