纯CSS实现视差缩放动画的唯一可行方案是scroll-timeline配合transform:scale()关键帧，需用命名时间线和animation-range精确控制节奏。
纯 CSS 实现“视差滚动 + 图片缩放”动画，不能靠 background-attachment: fixed 驱动缩放——它不响应滚动位置，也不能直接用 animation 时间轴控制缩放幅度随滚动线性变化。真正可行的路径只有一条：scroll-timeline 配合 transform: scale() 关键帧，且必须用命名时间线 + animation-range 精确调控缩放节奏。
为什么 background-attachment + scale() 组合行不通
很多人试图给带 background-attachment: fixed 的容器加 scale() 动画，结果发现：缩放是全局、瞬时、与滚动脱节的。因为 background-attachment: fixed 本身在 iOS Safari 和 Android Chrome 110+ 中已被静默降级为 scroll，缩放动画根本没触发源；即使桌面端生效，scale() 也只会按固定时长播放，无法随滚动进度实时伸缩。
-
background-attachment: fixed不产生滚动绑定信号，animation-timeline无法监听它 - 缩放若写在
@keyframes里但未绑定滚动时间线，就只是普通 CSS 动画，和滚动无关 - 强行用 JS 监听
scroll并设style.transform = scale(${1 + scrollY * 0.001})会掉帧，尤其在 iOS Safari 上触发强制 layout
scroll-timeline 实现缩放视差的最小可行代码
核心是让图片的 scale() 值随页面滚动进度归一化变化。必须定义命名时间线，并把图片包裹在有明确滚动上下文的容器中（body 或 html）。
@scroll-timeline zoom-parallax {
source: selector(html);
orientation: vertical;
}
<p>.zoom-img {
animation: zoom-in-out 1s linear forwards;
animation-timeline: zoom-parallax;
animation-range: entry 0% cover 200%;
}</p><p>@keyframes zoom-in-out {
from { transform: scale(1); }
to { transform: scale(1.4); }
}-
source: selector(html)比scroll(root)更可靠，避免部分安卓 WebView 不识别root -
cover 200%拉长动画区间，让缩放过程更平缓——数值越大，缩放越“慢”，视觉上更像远距离背景层 - 必须用
transform（不是width/height），否则触发重排，性能崩溃 - 若想缩放同时带位移（如轻微上浮），可在同一
@keyframes中叠加translateY()，但不要混用scale()和rotate()等多维变换，某些旧版 Safari 渲染异常
多图不同缩放节奏的层级控制技巧
要让一组图片呈现“近大远小、近快远慢”的纵深感，不能靠 z-index，而要靠 animation-range 区间长度 + @keyframes 幅度组合。同一时间线下，区间越短、幅度越大，视觉速度越快。
立即学习“前端免费学习笔记（深入）”；
- 前景图：
animation-range: entry 30% cover 50%+from { scale(1) }→to { scale(1.6) }（快进快出） - 中景图：
animation-range: entry 10% cover 120%+scale(1) → scale(1.3)（中速持续） - 背景图：
animation-range: entry 0% cover 250%+scale(1) → scale(1.15)（极慢微变） - 所有图片都加
will-change: transform，但仅对真正参与动画的元素加，避免合成层爆炸
真正难的不是让一张图缩放，而是让缩放速率、起始时机、缓动曲线（推荐 cubic-bezier(0.25, 0.46, 0.45, 0.94)）三者匹配滚动物理感——这需要反复调试 animation-range 的百分比和 @keyframes 的终点值，而不是套模板。
