能实现多层视差，但需复用同一scroll-timeline，为各层单独定义@keyframes并用animation-range分段控制触发区间，位移比例须通过transform显式配置，CSS无原生parallax-speed属性。
能实现，但必须用 scroll-timeline + animation-timeline 绑定多层元素，并手动控制各层的 animation-range 和关键帧位移比例——纯 CSS 视差无法自动“按系数缩放”，所有速度差都得靠动画进度映射和 transform 偏移量显式配置。
为什么不能直接写 parallax-speed: 0.3？
CSS 没有原生视差系数属性。所谓“中景滚动 60%、背景 30%”，本质是同一滚动时间线下，不同元素的动画执行范围（animation-range）和位移幅度（transform）按比例缩放的结果。浏览器只管“滚动到哪 → 动画走到哪”，不负责“换算成多少像素”。
-
scroll-timeline提供的是归一化进度（0% → 100%），不是物理滚动距离 - 各层位移必须由
@keyframes中的transform值显式定义，比如背景层从translateY(0)到translateY(-200px)，而前景层走translateY(0)到translateY(-50px) - 如果想让背景“看起来慢”，就得让它在相同滚动区间内移动更少像素，或拉长它的
animation-range范围
如何配置多层滚动时间线并绑定不同 range？
一个容器配一条时间线即可，多层共享同一 scroll-timeline-name，但各自用 animation-range 切割不同触发段，再配合不同 keyframes 幅度实现速度差：
@scroll-timeline scroll-timeline-main {
source: auto;
orientation: vertical;
scroll-offsets: 0%, 100%;
}
<p>.foreground {
animation: slideIn 1s linear;
animation-timeline: scroll-timeline-main;
animation-range: entry 0% cover 80%; /<em> 入口即开始，覆盖前 80% 滚动 </em>/
}</p><p>.midground {
animation: slideIn 1s linear;
animation-timeline: scroll-timeline-main;
animation-range: entry 20% cover 90%; /<em> 延迟启动，节奏更平缓 </em>/
}</p><p>.background {
animation: parallaxBg 2s linear;
animation-timeline: scroll-timeline-main;
animation-range: entry 0% cover 100%; /<em> 全程参与，但位移更小 </em>/
}</p><p>@keyframes slideIn {
from { transform: translateY(50px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}</p><p>@keyframes parallaxBg {
from { transform: translateY(0); }
to { transform: translateY(-80px); } /<em> 幅度只有 foreground 的 ~1/3 </em>/
}容易忽略的兼容性与合成层陷阱
Chrome 115+、Firefox 119+ 支持完整语法，但 Safari 17.4 仅支持 view-timeline（可视区时间线），不支持 @scroll-timeline —— 这意味着整页视差必须改用 view() + view-timeline-name，且只能绑定到容器内滚动，不能监听 document.scrollingElement。
立即学习“前端免费学习笔记（深入）”；
- 所有动画属性必须是合成层友好的：
transform、opacity，禁用top/left/width等触发布局的属性 -
animation-timeline不接受函数调用，view()是唯一内置函数，scroll()已被废弃，不要在新项目里用 - 若目标元素未设置
contain: layout paint style或未脱离文档流，滚动时可能触发重排，抵消性能收益
真正难的不是写对语法，而是把「滚动距离 → 各层位移」这个映射关系，在不写 JS 的前提下，用有限的 animation-range 分段 + @keyframes 插值精度压准——尤其当页面有吸顶导航、动态高度模块时，entry/cover 的计算基准会偏移，必须实测微调。
