Chrome 125 中 animation-timeline 未实现，应改用 scroll-timeline 配合 @keyframes 实现滚动缩放；兼容性要求高时推荐 IntersectionObserver 手动控制 scale，并注意 transform-origin、image-rendering 等细节。
animation-timeline 在 Chrome 中根本不能用
如果你在 Chrome 125 版本中尝试实现图片随滚动条平滑缩放，并遇到了 animation-timeline 失效的问题，请先停止尝试。该属性目前仍处于实验性阶段，默认并未启用。更重要的是，它无法将 scroll() 时间线绑定到非根滚动容器。即使你通过 chrome://flags 手动开启了实验性功能，最终也很可能遇到 Invalid CSS property name: animation-timeline 的错误提示，或者动画完全无响应——这并非你的代码有误，而是浏览器尚未完整支持该特性。
用 scroll() + @keyframes 实现滚动缩放的替代方案
那么，当前真正可行的解决方案是什么？答案是：使用 scroll-timeline（注意，不是 animation-timeline）结合 @keyframes 和 transform: scale() 来实现。这套方案的核心在于，它必须与 animation 属性配合使用，并且仅对「具备滚动能力的容器」生效。以下是三个关键注意事项：
- 首先，父级容器必须设置
overflow-y: scroll，并拥有明确的高度定义（例如height: 100vh）。 - 其次，必须为
scroll-timeline命名，并明确指定其source（滚动容器）和滚动axis（通常为y轴）。 - 最后，在
@keyframes中，建议仅使用transform: scale()。若混合opacity等其他属性，可能导致动画层分离，产生视觉上的错位或闪烁。
以下是一个具体的实现代码示例：
.hero-image {
animation: scaleOnScroll 1s linear;
animation-timeline: --scroll-tl;
}
@scroll-timeline --scroll-tl {
source: selector(#scroller);
axis: y;
start: 0;
end: 100%;
}
@keyframes scaleOnScroll {
0% { transform: scale(1.2); }
100% { transform: scale(1); }
}
更可靠：用 IntersectionObserver 手动控制 scale
如果你的项目需要兼容 Safari、Firefox 等浏览器，或者希望实现更精确的、与滚动位置线性对应的缩放效果（例如滚动距离与缩放比例实时联动），那么使用 IntersectionObserver API 是目前最稳定、兼容性最好的方案。它不依赖于任何实验性的 CSS 特性，并能让你获取精确的 intersectionRatio 或自定义计算出的滚动比例。
立即学习“前端免费学习笔记（深入）”；
- 监听图片容器时，可将
rootMargin设置为"0px 0px -50% 0px"，这样触发点将位于视口中心位置。 - 在回调函数中，动态更新元素的样式：
el.style.transform = `scale(${1 + 0.2 * (1 - ratio)})`。 - 建议添加
will-change: transform属性，以提示浏览器对变换进行优化，有效避免缩放过程中的布局抖动。 - 应避免在滚动事件回调中直接读取
scrollTop，正确的做法是使用requestAnimationFrame进行节流控制。
transform 缩放时图片模糊？检查 image-rendering
效果实现了，但图片在缩放时变得模糊或出现锯齿？这通常是浏览器默认采用双线性插值进行平滑处理导致的。对于照片类图像，可以尝试强制指定其渲染方式：在 Safari 中可使用 image-rendering: -webkit-optimize-contrast，在 Chrome 或 Firefox 中则使用 image-rendering: crisp-edges。但需要注意以下几点：
crisp-edges在非整数缩放比例下可能效果不佳，甚至导致更严重的模糊。因此，建议仅在scale > 0.95时启用此属性。- 如果图片是
width和height属性未被 CSS 覆盖为固定像素值，否则缩放时容易产生拉伸或失真。 - SVG 图片通常不受
image-rendering属性影响，缩放后依然能保持清晰，但前提是其viewBox设置正确。
总而言之，实现滚动缩放效果听起来简单，但实际开发中容易遇到的瓶颈往往不是缩放比例的计算逻辑，而是那些容易被忽略的细节：例如时间线绑定失败、缩放基准点偏移（记得设置 transform-origin: center），或者 scroll-timeline 的 source 指向了错误的父容器。这些细节一旦疏忽，整个动画效果便会悄无声息地失效。
