box-shadow动画不动是因为关键帧未完整声明所有参数，必须每帧都写全h-offset、v-offset、blur-radius、spread-radius和color五部分，空位补0，否则浏览器无法插值。
box-shadow 动画为什么不动？关键帧里漏了 box-shadow 的完整声明
CSS 动画中 box-shadow 不变化，通常不是因为写错了属性名，而是因为动画关键帧里没写全阴影参数——哪怕只改一个值（比如模糊半径），也必须把整个 box-shadow 值重写一遍，不能只写变化的部分。
浏览器不支持对单个阴影维度（如 blur-radius）做独立插值，它只认整个 box-shadow 值的字符串匹配与过渡。
- 错误写法：
@keyframes float { 0% { box-shadow: 0 4px 12px rgba(0,0,0,0.1); } 100% { box-shadow: 0 8px 24px rgba(0,0,0,0.2); } }—— 这看似合理，但若起始/结束值的参数个数不一致（比如漏了inset或多写了偏移），动画会直接失效或跳变 - 必须保证每帧的
box-shadow都是「同结构」：统一用h-offset v-offset blur-radius spread-radius color五段式，空位补0，避免隐式省略 - 推荐始终显式写出
0的spread-radius，比如box-shadow: 0 6px 16px 0 rgba(0,0,0,0.15)，否则不同帧间结构错位会导致动画卡顿或消失
漂浮感靠什么？不是单纯上下位移，是 shadow + transform 联动
纯 transform: translateY() 只是上下弹，缺乏真实气泡的“受力反馈”；真正有漂浮感的动效，是让阴影大小、模糊度和主体位移形成视觉呼应：上升时阴影收窄变淡，下沉时扩散加重。
这种联动不能靠两个独立动画硬凑，必须用同一组关键帧统一分配所有属性，否则节奏错位会显得僵硬。
立即学习“前端免费学习笔记（深入）”；
- 上升阶段（模拟气泡上浮）：减小
v-offset、缩小blur-radius、降低透明度，同时配合transform: translateY(-8px) scale(1.02) - 下沉回弹阶段：增大
v-offset、扩大blur-radius、提高透明度，加轻微scale(0.98)模拟挤压感 - 动画时长建议用
cubic-bezier(.34,1.56,.64,.4)—— 这个非标准曲线比ease-in-out更贴合物理惯性，尤其适合模拟气泡的轻盈回弹
多重 box-shadow 怎么叠才不糊？别堆超过 3 层，且优先用透明度控制层次
想让气泡阴影有立体纵深，有人会叠加 4–5 层 box-shadow，结果在低性能设备上直接掉帧，甚至渲染出边缘噪点。问题不在数量本身，而在每层的 blur-radius 和 opacity 搭配失当。
浏览器对多重阴影的合成开销是指数级增长的，尤其当多层都带大模糊值时，GPU 渲染压力陡增。
- 最多用 3 层：近层（
0 2px 4px 0 rgba(0,0,0,0.1)）、中层（0 6px 12px -2px rgba(0,0,0,0.08)）、远层（0 12px 24px -4px rgba(0,0,0,0.05)） - 关键技巧：后两层务必带负
spread-radius（如-2px），能有效收紧扩散范围，避免层层晕染成一团灰 - 绝对不要用
rgba(0,0,0,0.3)+rgba(0,0,0,0.3)叠两层来等效0.6，透明度叠加是非线性的，实际效果更浑浊
动画卡顿或闪烁？检查 will-change 和硬件加速触发条件
即使关键帧写得再准，如果没告诉浏览器“这个元素要频繁动”，box-shadow 动画依然可能掉帧或闪屏——尤其是 Safari 和旧版 Chrome。
will-change: transform 是最稳妥的触发方式，但只对 transform 有效；而 box-shadow 动画必须搭配 transform 才能稳定启用 GPU 加速。
- 必须同时设置：
will-change: transform, box-shadow（注意：Safari 支持box-shadow，但部分安卓 WebView 不支持，保险起见只写transform） - 更可靠的做法：在动画元素上加
transform: translateZ(0)或translate3d(0,0,0)，强制创建合成层 - 切忌在父容器上设
overflow: hidden同时又让子元素阴影溢出——这会导致浏览器反复重绘裁剪区域，动效越流畅越卡
