background-size动画不生效是因为cover/contain不可插值；须用具体数值如102% 102%，配breathe式关键帧、cubic-bezier缓动及forwards填充，并确保容器有明确尺寸和overflow:hidden。
background-size 动画不生效，基本是因为用了 cover 或 contain 这类关键词——它们不可插值，浏览器根本没法做过渡计算。
为什么 background-size: cover 加 @keyframes 没反应
不是语法错，是语义限制：CSS 动画只能对可计算、可线性插值的值起作用。cover 是一个计算结果，每次容器或图片尺寸变化时，浏览器才重新算一次缩放比，它本身没有“中间态”。所以写成：
@keyframes zoom { 0% { background-size: cover; } 100% { background-size: 120% 120%; } }
这段代码在绝大多数浏览器里都会直接跳变，看不到动画。
- 必须用具体单位：比如
102% 102%、150px auto、200vw 200vh - 不能混用：比如
100% cover是非法组合，会退化为初始值 - iOS Safari 尤其敏感，连
%都可能因视口抖动失效，优先考虑vw/vh
@keyframes 中 background-size 的关键帧怎么写才不撕裂
首尾帧必须视觉一致，且中间过渡要避开“拉伸感”。常见错误是写成 100% → 120% → 100%，看起来像弹跳，不是呼吸。
立即学习“前端免费学习笔记（深入）”；
- 幅度控制在 ±2% 内（如
102% 102%→98% 98%），太大易察觉抖动 - 周期建议 6–8s，太短显躁，太长看不出动态
- 缓动函数别用
ease-in-out，改用cubic-bezier(.4,0,.6,1)更柔和 - 必须加
animation-fill-mode: forwards，否则动画结束瞬间会跳回初始值
正确示例：
@keyframes breathe {<br> 0%, 100% { background-size: 102% 102%; }<br> 50% { background-size: 98% 98%; }<br>}
容器尺寸没设好，再准的 keyframes 也白搭
background-size 是相对于容器计算的。如果容器高度塌陷、宽高未定义、或被 display: inline 限制，背景图就缩在左上角不动，动画只在那一点发生。
- 必须有明确尺寸：至少
height+width，或min-height+aspect-ratio - 避免
background-attachment: fixed，它会冻结背景坐标系，和缩放冲突 - 全屏场景慎用
100vh：Safari 移动端地址栏收放会导致容器高度突变，建议改用min-height: 100vh+ 父级height: 100% - 响应式布局中，
%依赖父容器尺寸，不如vw/vh可控
多层背景循环缩放时容易忽略的 overflow 问题
当叠加云层、粒子等多层 background-image 并各自做 background-size 动画时，每层超出容器的部分必须被裁剪，否则会出现边缘撕裂或位移错位。
-
overflow: hidden必须加在每一层容器上，不能只靠父级统管 - 各层动画周期和幅度最好错开（比如主层 7s，次层 9s），避免同步回跳放大视觉瑕疵
- 如果某层用了
background-position位移动画，需确保background-size和background-position的 keyframes 锚点一致，否则缩放中心偏移
最常被跳过的点：动画元素的容器没设 position: relative，导致 background-position 基准错乱，缩放时图像“漂移”。
