background-size动画无效是因为关键词（如cover）不可插值，须用具体数值（如102% 98%）；容器需有明确尺寸且避免fixed定位；iOS Safari需加translateZ(0)触发硬件加速。
background-size 动画为什么不动？
直接给 background-size 加 @keyframes 通常没反应，不是写法错，而是浏览器默认不触发重绘——它只在值发生「离散变化」（比如从 100px 跳到 200px）时才动画，而 background-size: cover 或 contain 是关键词，没法插值。
- 必须用具体数值单位（
px、%、vw），不能混用关键词 -
background-size: 100% 100%和cover视觉可能一样，但前者可动画，后者不行 - 如果父容器宽高不固定（比如响应式布局），用
vw/vh比%更可控
呼吸效果的 keyframes 怎么写才自然？
“呼吸”不是匀速放大缩小，得模拟轻微起伏：起始略大 → 收缩 → 再舒展一点 → 回到起点。用 cubic-bezier(.4,0,.6,1) 比 ease-in-out 更柔和，避免机械感。
- 推荐范围：从
102% 102%缩到98% 98%，幅度控制在 ±2% 以内，太大像抖动 - 周期设为
8s左右，太短显躁，太长看不出呼吸感 - 加
animation-fill-mode: forwards防止动画结束后跳回初始值
@keyframes breathe {
0%, 100% { background-size: 102% 102%; }
50% { background-size: 98% 98%; }
}
background-image 容器必须满足什么条件？
再准的 background-size 动画，如果容器本身不“撑开”，背景图就缩在角落不动。常见于 div 无内容、无高度、或被 display: inline 限制。
- 容器需有明确尺寸：
height+width，或至少min-height+aspect-ratio - 避免
background-attachment: fixed，它会锁死背景位置，和缩放冲突 - 如果用
object-fit替代背景图，那是 img 元素的事，和background-size无关
移动端 Safari 里动画卡顿怎么办？
iOS Safari 对 background-size 动画优化差，尤其配合 background-position 一起动时，容易掉帧。核心解法是把动画层单独提升为合成层。
立即学习“前端免费学习笔记（深入）”；
- 强制硬件加速：
transform: translateZ(0)或will-change: background-size - 但
will-change别乱加，只加在真正需要动画的元素上，否则内存开销明显 - 测试发现：用
100vw 100vh替代100% 100%在某些 iOS 版本下更稳
