scrolltimeline 不能用 new scrolltimeline() 创建，只能通过 @scroll-timeline css 规则声明，且必须指定 source 和 orientation；start/end 应用 px/vh 单位，需配合 animation-range 使用，滚动容器须真实可滚动且未被隔离坐标系。
scroll-timeline 不能用 new ScrollTimeline() 创建
浏览器不暴露 ScrollTimeline 构造函数，写 new ScrollTimeline({ source: elem }) 会直接抛出 TypeError: Illegal constructor。这不是兼容性问题，而是规范刻意设计：它只支持 CSS 声明式定义，所有绑定必须走 @scroll-timeline 规则 + animation-timeline 引用路径。
@scroll-timeline 必须指定 source 和 orientation
漏掉 source 或 orientation，时间线就无效，动画退回到普通时间轴。常见错误包括：
-
source: #container指向的元素没设overflow: auto或scroll，实际不可滚动 - 写了
orientation: block（旧草案名），但必须用vertical或horizontal - 滚动容器自身高度不足（如内容太短），
scrollHeight === clientHeight，无法触发滚动，时间线全程卡在 0%
start/end 推荐用 px 或 vh，别用 %
@scroll-timeline 的 start 和 end 是相对于滚动容器内容高度（scrollHeight）的绝对偏移，不是百分比进度。用 % 会导致：
- 多数浏览器静默忽略整条规则（如
start: 0%） - 动态内容（如懒加载图片）撑开高度后，基准变化，动画错位
-
start: 0px; end: 100vh更可靠，适合首屏触发场景 -
start: 0px; end: 500px适合内容高度稳定、有明确滚动区间的容器
animation-timeline 绑定后必须配 animation-range
只写 animation-timeline: --my-timeline 不够。动画关键帧仍按 0%→100% 运行，但时间线本身可能从滚动 20% 开始、到 80% 结束。必须显式用 animation-range 映射：
-
animation-range: 0% 33%表示该动画只在滚动区间前 1/3 播放 -
animation-range: entry 20% exit 90%是 view-timeline 语法，和 scroll-timeline 不互通，别混用 - 若省略
animation-range，动画默认映射整个时间线区间（即0% 100%），但起止点由@scroll-timeline的start/end决定
最易被忽略的是：滚动容器必须真实可滚动（scrollHeight > clientHeight），且不能被 overscroll-behavior: none、position: fixed 或 transform 隔离出滚动坐标系——否则 animation-timeline 会静默失效，DevTools 里也看不到生效痕迹。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
