scroll-timeline需先定义@scroll-timeline规则再通过animation-timeline关联，否则transform: scale()不响应滚动；必须指定source、start/end值，显式写出完整transform函数，注意兼容性与渲染层优化。
scroll-timeline 怎么配才能触发 transform 缩放
原生 CSS 滚动驱动动画的核心是 scroll-timeline，但它不支持直接写在元素上，必须先定义 @scroll-timeline 规则，再通过 animation-timeline 关联。漏掉这一步，transform: scale() 就完全不会随滚动变化。
常见错误现象：scale 值卡死不动、控制台没报错但动画无响应、滚动到一半才突然跳变。
- 必须指定
source（通常是scroll(root)或某个容器的id） -
start和end用0px/100vh等绝对单位更稳，避免用selector()在复杂 DOM 中失准 - 缩放动画推荐用
ease-out而非linear，否则视觉上容易“抽搐”
@@scroll-timeline scale-on-scroll {
source: scroll(root);
start: 0px;
end: 100vh;
}
transform: scale() 在滚动动画里为什么常被重写或失效
CSS 动画中 transform 是可叠加的，但如果你同时写了 transform: translateX(10px) 在元素上，又在动画里只写 scale(1.2)，那 translateX 会被覆盖——因为动画里的 transform 值会完全替换内联或普通样式中的值，不是“追加”。
使用场景：想让元素一边平移一边缩放，或保持原有旋转状态。
立即学习“前端免费学习笔记（深入）”；
- 动画关键帧里必须显式写出全部需要的
transform函数，比如transform: translateX(20px) scale(1.3) - 别依赖 JS 动态加
style.transform，它和 CSS 动画会冲突；统一交给@keyframes管理 - 如果父容器有
transform: scale(0.9)，子元素的滚动缩放会按相对比例计算，容易误判最终尺寸
兼容性差？fallback 方案怎么写才不崩
scroll-timeline 目前仅 Chromium 内核（Chrome 115+、Edge 115+、Opera 101+）稳定支持，Safari 和 Firefox 完全不识别。硬上会导致缩放动画彻底消失，但页面其他部分不能因此错位或白屏。
性能影响：不用 JS 实现时，CSS 滚动驱动动画是合成层友好的，比 IntersectionObserver + requestAnimationFrame 更省 CPU。
- 用
@supports (animation-timeline: works)包裹整套滚动动画规则，老浏览器自动跳过 - 基础状态（如默认
scale(1)）必须写在@supports外，否则降级后元素可能变成scale(0)或未定义值 - 真要兼容 Safari，得另起一套 JS 方案，但注意：不要监听
scroll事件本身，改用IntersectionObserver+threshold模拟滚动区间
scale 动画卡顿或闪烁的三个隐藏原因
即使代码写对了，scale 在滚动中仍可能跳帧、闪一下、或在某些分辨率下变形。这不是动画曲线问题，而是渲染层没对齐。
容易被忽略的地方：缩放中心点默认是 50% 50%，但如果你的元素有 border-radius 或 box-shadow，缩放时边缘像素采样会出问题。
- 给元素加
will-change: transform，但仅在需要时加（比如进入视口前），避免长期占用图层资源 - 确保元素有明确的
width/height，百分比或fit-content容易导致缩放过程中布局重算 - 慎用
scale(0.99)这类接近 1 的值——GPU 对亚像素缩放处理不稳定，换成scale(0.8)或scale(1.2)反而更顺
滚动缩放看着简单，实际卡点全在 timeline 定义、transform 覆盖逻辑、和渲染层调度之间。调的时候盯着 DevTools 的 “Rendering” 面板看 layer 是否新增、是否频繁切换，比反复改 easing 曲线有用得多。
