scroll-driven animations 在 chrome 115+ 默认启用，safari 16.4+ 需开启 webkitscrolltimeline 并加 -webkit- 前缀，firefox 完全不支持；必须显式指定 source（如 selector(html)），animation-timeline 须直接写名称无引号或括号，animation-duration 被忽略，移动端需防 ios 回弹干扰。
scroll-driven animations 需要启用实验性功能
Chrome 115+ 默认启用 @scroll-timeline，但 Safari 和 Firefox 仍需手动开启实验性功能。Safari 16.4+ 支持但要求启用 WebkitScrollTimeline，且必须用 -webkit- 前缀；Firefox 目前完全不支持，连 about:config 里也无对应开关。实际项目中若需兼容，得 fallback 到 IntersectionObserver + transform 手动计算。
启用方式（仅开发验证用）：
chrome://flags/#scroll-driven-animations
开启后重启浏览器——但这不能解决生产环境兼容问题。
定义 scroll-timeline 时必须绑定到可滚动容器
@scroll-timeline 不会自动关联 body 滚动，必须显式指定 source。常见错误是直接写 source: auto 期望监听页面滚动，结果动画完全不触发。正确做法是：要么把 timeline 绑定到 html 或 body（需确保它们有滚动条），要么绑定到一个带 overflow: auto 的容器。
例如实现视差背景，推荐这样写：
@scroll-timeline bg-parallax {
source: selector(html);
orientation: "vertical";
start: 0;
end: 100vh;
}
注意点：
-
selector(html)比selector(body)更可靠，因部分 CSS 重置会干扰 body 的滚动行为 -
start/end是相对滚动范围的偏移，不是像素值；100vh表示从顶部滚到底部视口高度的距离 - 若容器内容高度不足，timeline 会退化为 0–0 范围，动画卡在初始帧
background-position 动画必须用 animation-timeline 关联
仅定义 timeline 不会自动驱动动画，必须用 animation-timeline 显式绑定。而且它不接受函数调用语法，只能写 timeline 名字（不能带引号、括号或参数）。
典型错误写法：animation-timeline: bg-parallax(); 或 animation-timeline: "bg-parallax"; —— 这两种都会失效。
正确写法：
.parallax-bg {
background-image: url(./bg.jpg);
background-size: cover;
animation: move-bg 1s linear;
animation-timeline: bg-parallax;
}
@keyframes move-bg {
from { background-position: 0 0; }
to { background-position: 0 -100px; }
}
关键细节：
-
animation-duration实际被忽略，时间轴由 scroll-timeline 的start/end决定 - 若想让背景移动更慢（视差感更强），增大 keyframes 中的位移值（如
-200px），而非调 duration - 多个元素共用同一 timeline 时，它们的动画会严格同步，无需额外协调
移动端 Safari 的 overflow-anchor 和回弹影响 timeline 精度
iOS Safari 滚动时存在弹性回弹（overscroll bounce），会导致 html 的 scrollTop 在触底/顶时短暂超出实际范围，进而让 @scroll-timeline 计算出负值或超限值，造成动画突跳或倒播。
缓解方案（非根治）：
- 给
html加overflow-anchor: none减少锚点干扰 - 避免使用
end: 100%这类模糊边界，改用end: 100vh或具体 px 值 - 对关键帧做 clamp 处理：用
@property定义自定义属性 +animation-range（目前仅 Chrome 支持）限制生效区间
真正稳定的视差效果，在当前浏览器支持下仍需 IntersectionObserver 配合 requestAnimationFrame 手动插值——scroll-driven 是未来方向，但离“开箱即用”还有距离。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
