scroll timeline 是 css 原生声明式机制，将动画绑定到滚动位置；目前仅 chromium 系列（chrome 115+等）支持，firefox 和 safari 尚未实现，需用 css.supports('scroll-timeline-name', 'foo') 检测并提供 js 降级方案。
Scroll Timeline 是什么，浏览器支持现状如何
scroll-timeline 不是 JavaScript API，而是 CSS 原生声明式机制，用于将动画的播放进度绑定到滚动容器的滚动位置。它让 @keyframes 动画能随滚动自然启停、加速或反向，无需监听 scroll 事件或计算 scrollY。
目前仅 Chromium 内核浏览器（Chrome 115+、Edge 115+、Opera 101+）原生支持；Firefox 和 Safari 尚未实现，且无明确时间表。使用前必须检查：
- 不能依赖
CSS.supports('animation-timeline', 'scroll()')（该语法目前返回false，即使功能已启用） - 实际检测应通过
CSS.supports('scroll-timeline-name', 'foo')或直接尝试应用后用getComputedStyle验证
若需兼容旧浏览器，必须提供降级方案（如 JS 驱动 + IntersectionObserver），不能只写 CSS。
基础写法：定义滚动时间线并绑定到动画
核心是两步：先用 @scroll-timeline 规则定义时间线，再在动画中用 animation-timeline 引用。
@scroll-timeline slide-in {
source: selector(#container);
orientation: vertical;
start: 0px;
end: 100vh;
}
.slide-element {
animation: slideIn 1s linear;
animation-timeline: slide-in;
}
@keyframes slideIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
注意点：
-
source必须指向一个有滚动行为的元素（overflow-y: scroll或auto），且该元素需在 DOM 中存在、可被selector()定位 -
start/end是相对于滚动容器内容区域的偏移值，单位支持px、vh、%，但不支持em或rem -
orientation必须显式声明为vertical或horizontal，不能省略 - 动画本身必须有明确时长（
animation-duration），否则时间线无效
常见错误：动画不动、跳变或触发时机错乱
典型现象和对应解法：
- 动画完全不播放 → 检查
#container是否真的可滚动（height+overflow-y: scroll），以及是否被transform或contain隔离了滚动上下文 - 元素一进入视口就瞬间完成动画 →
start: 0px太激进，改用start: 100vh（即容器顶部到达视口底部时开始）或start: selector(#trigger)配合锚点元素 - 滚动中动画反复触发 → 确保该元素没有被重复添加/移除 DOM，或父容器高度动态变化导致滚动范围重算
- 水平滚动时间线无效 → 必须同时设置
orientation: horizontal和容器的overflow-x: scroll，且内容宽度 > 容器宽度
特别提醒：scroll-timeline 不响应 resize，如果滚动容器尺寸变化（如响应式断点切换），时间线不会自动更新，需手动重新应用样式或触发重排。
进阶控制：用 scroll-timeline-axis 和 scroll-timeline-range
scroll-timeline-axis（已废弃，仅历史兼容）已被 orientation 替代；真正有用的进阶能力是 scroll-timeline-range —— 它允许你把一个时间线复用到多个动画，并分别指定各自的起止区间：
.slide-element:nth-child(1) {
animation-timeline: slide-in;
animation-range: entry 0% exit 100%;
}
.slide-element:nth-child(2) {
animation-timeline: slide-in;
animation-range: entry 25% exit 125%;
}
animation-range 的值格式为 <range-name><start-offset><end-offset></end-offset></start-offset></range-name>，其中 entry 表示滚动容器顶部与目标元素交叠的时刻，exit 表示容器底部与目标元素分离的时刻。偏移支持百分比或长度值，但必须成对出现。
这个特性容易被忽略：它让单个时间线能驱动多个错峰动画，避免为每个元素重复定义 @scroll-timeline，但前提是所有目标元素共享同一个滚动源容器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
