animation-timeline截至2024年底尚未被任何主流浏览器实现，chrome、firefox、safari均不支持，该属性仍处于css animations level 2草案阶段，实际使用会被解析器静默忽略；当前稳定替代方案是intersectionobserver+transform:scale()或scroll-driven animation（@scroll-timeline）。
animation-timeline 目前（截至 2024 年底）尚未被任何主流浏览器实现，Chrome、Firefox、Safari 均不支持该 CSS 属性。你无法用它实现“随手势滚动的图片缩放”。
别折腾这个属性了——它还在 CSS Animations Level 2 的草案里，连 @property 都比它落地得早。
为什么查不到 animation-timeline 的实际效果？
因为它是“时间线绑定”机制的设想性提案，目标是把动画进度锚定到滚动、视口进入、甚至自定义时间源上。但目前所有浏览器解析器遇到它都会直接忽略，既不报错，也不生效。
常见误判场景：
- 在 DevTools 里写了
animation-timeline: scroll(block-start);，但动画完全不动 → 实际是被静默丢弃 - 查 MDN 或 CanIUse，看到“Experimental”或“Not supported”却以为开了 flag 就能用 → Chrome 的
chrome://flags/#enable-experimental-web-platform-features早已移除了对该特性的开关支持
现在能稳定实现“随手势滚动缩放图片”的替代方案
用 IntersectionObserver + transform: scale() 是当前最轻量、兼容性最好（IE11 需 polyfill，但现代项目基本无压力）的做法：
- 监听图片元素在视口中的相对位置（比如 top 距离视口顶部的百分比）
- 把该百分比映射为
scale(1.0)到scale(1.4)的连续值 - 用
requestAnimationFrame批量更新，避免 layout thrashing
示例核心逻辑：
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
const rect = entry.boundingClientRect;
const progress = Math.min(1, Math.max(0, (window.innerHeight - rect.top) / window.innerHeight));
entry.target.style.transform = `scale(${1 + progress * 0.4})`;
});
}, { threshold: [0, 0.25, 0.5, 0.75, 1] });
如果坚持用纯 CSS，只能退回到 scroll-driven animation（SDA）
这是目前唯一被 Chrome 115+、Edge 115+、Safari 17.4+ 支持的滚动关联动画方案，但它依赖的是 @keyframes + scroll-timeline，和已废弃/未实现的 animation-timeline 不是一回事：
-
scroll-timeline是一个独立的@scroll-timeline规则，定义时间范围 - 动画本身仍需通过
animation属性挂载，并显式指定animation-timeline: my-timeline;—— 但注意：这个animation-timeline是 CSS 属性名，不是草案里那个更激进的“任意时间源绑定”版本 - 它只支持垂直/水平滚动容器，不支持 touchmove 手势模拟的“滚动感”，所以真正在手机上滑动时可能卡顿或不同步
也就是说：你能写，但手势滚动 ≠ 滚动容器触发，移动端体验大概率不如 JS 方案。
真正容易被忽略的一点：所谓“随手势”，本质是监听 touchmove 的 deltaY 并映射为 scale 变化——这一步必须靠 JS。CSS 再怎么演进，也没法绕过 touch 事件的原始输入。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
