background-size 本身不触发动画，必须配合 animation 或 transition 才能实现动态缩放；需用 @keyframes 定义变化过程，且平铺背景、统一多层动画参数、慎用 cover/contain，并优先使用百分比单位以保障兼容性。
background-size 为什么不能直接让图案“动起来”
它本身不触发动画，只是控制尺寸——想看到变化，必须配合 animation 或 transition 改变它的值。常见错误是只写 background-size: 200% 200% 就以为图案会循环缩放，结果纹丝不动。
- 必须用
@keyframes定义尺寸变化过程，比如从100% 100%到200% 200% - 背景图得是平铺的（
background-repeat: repeat），否则尺寸变化没视觉反馈 - 如果用
background-position配合做位移节奏，background-size变化会放大/缩小位移幅度，容易失控
用 background-size 实现呼吸感节奏的实操要点
所谓“呼吸感”，本质是让图案在缩放中产生疏密起伏。关键不在缩得多，而在缩得匀、停得准。
- 推荐用
ease-in-out缓动，避免线性缩放带来的机械感 - 周期设为 4–6s 比较符合人眼对“节奏”的感知，太短像闪烁，太长像静止
- 慎用
background-size: cover或contain——它们会强制适配容器，失去可控缩放范围 - 示例：
@keyframes breathe { 0%, 100% { background-size: 120% 120%; } 50% { background-size: 180% 180%; } }
多层背景叠加时 background-size 的冲突风险
当用多个 background-image 叠加（比如一层噪点 + 一层网格），每层的 background-size 独立生效，但缩放不同步就会穿帮。
- 所有层必须用相同
animation-duration和animation-timing-function，否则错相 - 如果某层是 SVG 或渐变，
background-size对其影响方式和位图不同：SVG 可能被拉伸失真，linear-gradient的色标间距会随尺寸线性变化 - 调试技巧：临时给每层加不同
background-color半透明遮罩，肉眼观察各层缩放是否同步
移动端 Safari 对 background-size 动画的兼容陷阱
iOS 15.4 之前，Safari 不支持对 background-size 做 transition，仅支持 animation；且若值含单位（如 200px），动画可能卡顿或跳帧。
立即学习“前端免费学习笔记（深入）”；
- 统一用百分比（
%）或无单位数值（2表示 200%），避开px/em单位 - 加
-webkit-animation前缀，iOS 旧版本仍需此支持 - 如果动画用于按钮悬停等交互场景，务必测试真机——模拟器常掩盖渲染掉帧问题
