如何在CSS中实现具有视差滚动效果的图片缩放动画？-css教程-PHP中文网

纯css实现视差缩放动画的唯一可行方案是scroll-timeline配合transform:scale()关键帧，需用命名时间线和animation-range精确控制节奏。

如何在css中实现具有视差滚动效果的图片缩放动画？

纯 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）。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

@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); }
}</p>

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，但仅对真正参与动画的元素加，避免合成层爆炸