scroll-timeline绑定多层视差需复用同一时间轴，为每层单独定义@keyframes并用--parallax-speed等css变量控制位移比例；animation-range须用cover而非entry/exit，且所有元素必须位于同一滚动容器内。
scroll-timeline 如何绑定多层视差元素并控制各自位移比例
直接用 scroll-timeline 实现多层视差，核心不是“堆叠多个 timeline”，而是复用同一个时间轴、为不同元素设置不同动画曲线和位移幅度。浏览器只关心「滚动进度 → 当前动画值」的映射，位移量完全由 @keyframes 中的 transform 计算逻辑决定。
- 必须为每层视差元素单独定义
@keyframes，不能共用同一套关键帧——否则所有层位移量相同，失去层次感 - 推荐用 CSS 自定义属性（如
--parallax-speed: 0.3）配合calc()控制位移，避免硬编码数值 -
animation-range要按层设置：背景层可设为cover 0% cover 100%，内容层建议缩窄到entry 20% exit 80%，防止过早/过晚触发 - 注意：所有视差层需在同一滚动容器内（
source: selector(...)指向同一个父容器），否则滚动进度不一致
为什么 position: fixed 元素在 scroll-timeline 中位移失效
position: fixed 元素脱离文档流，其定位基准是视口而非滚动容器，导致 scroll-timeline 的滚动偏移计算失去参照系——浏览器无法将该元素的渲染位置与容器滚动距离建立可靠映射。
- 解决方法只有两个：改用
position: sticky（需父容器有明确高度和overflow-y: scroll），或彻底放弃 fixed，改用transform: translateY()+will-change: transform模拟固定效果 - 若坚持用 fixed，必须手动在 JS 中监听
scroll并更新style.transform，等于退回到传统方案，失去scroll-timeline的性能优势 - Chrome 115+ 对 fixed 元素的支持仍不稳定，即使写上
animation-timeline，也可能静默忽略
animation-timeline 和 animation-range 的典型组合陷阱
animation-timeline 只负责把动画“挂”到滚动进度上，真正决定“哪一段滚动触发哪一段动画”的是 animation-range。这两者配合不当，会导致动画卡顿、跳帧或完全不执行。
-
animation-range: entry 0% exit 100%是常见错误写法——entry/exit是针对视口可见性（View Timeline）的，用在 Scroll Timeline 上会无效，必须用cover或normal - 正确写法示例：
animation-range: cover 20% cover 80%表示：当滚动容器已滚动 20% 时动画开始，滚动到 80% 时结束 - 如果元素本身高度远小于滚动容器，
cover 0% cover 100%可能导致动画全程播放过快；建议结合元素实际占位估算合理区间 -
animation-duration在 scroll-driven 场景下被忽略，不要设值，否则可能干扰浏览器对滚动进度的解析
兼容性 fallback 必须手动处理，没有自动降级
截至 2026 年 4 月，@scroll-timeline 仅在 Chrome 115+、Edge 115+ 原生支持，Firefox 处于实验阶段（需开启 layout.css.scroll-driven-animations.enabled），Safari 完全不支持。CSS @supports 无法检测 @scroll-timeline 规则本身，只能检测属性级支持。
- 安全写法：
@supports (animation-timeline: --foo) { /* 启用 scroll-timeline 样式 */ }，但注意这只能判断属性是否被识别，不能保证 timeline 规则生效 - 更可靠的方式是 JS 特性检测：
if ('scrollTimeline' in CSS) { /* 加载 timeline 规则 */ } - fallback 方案不能只靠 CSS，必须准备一套 JS 驱动的备选逻辑（例如基于
IntersectionObserver+requestAnimationFrame），并在不支持时启用 - 别指望 polyfill——目前没有任何成熟 polyfill 能模拟 scroll-timeline 的合成器线程调度能力
多层视差最难的不是写多少层 @keyframes，而是让每一层的 animation-range 区间、位移系数、以及容器滚动边界三者严丝合缝。稍有偏差，就会出现某一层突然加速、滞后或提前结束——这些细节在 DevTools 的 Animations 面板里几乎不可见，只能靠滚动过程中的视觉比对来校准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
