box-shadow 和 filter: blur() 动画卡顿是因为它们触发高代价重绘，无法走合成层；应改用 transform/opacity 动画、will-change 提前升层（仅支持 transform/opacity）、伪元素承载模糊/阴影、SVG 滤镜替代，或直接用位移+透明度模拟效果。
为什么 box-shadow 和 filter: blur() 动画会卡顿
这两个属性触发动画时，浏览器必须对每一帧重新计算像素级的渲染效果，属于“高代价重绘”。尤其是当元素尺寸大、阴影/模糊半径高、或同时有多个动画时，GPU 往往扛不住，transform 和 opacity 则能走合成层（compositor layer），几乎不触发重排重绘。
用 will-change 提前升层但别滥用
对要加阴影或模糊动画的元素，可以主动提示浏览器提前创建独立图层：
.animated-element {
will-change: transform, opacity;
}但注意：will-change: box-shadow 或 will-change: filter 无效 —— 浏览器根本不支持对这两个属性做图层提升。强行写只会增加内存开销，毫无性能收益。
- 只在动画开始前 100–200ms 设置
will-change - 动画结束后立即设为
auto或移除，避免长期占用 GPU 内存 - 移动端慎用，部分 Android WebView 对
will-change支持差且易引发闪烁
把模糊/阴影“借”给伪元素或子元素做动画
核心思路：让真正变化的属性是 transform 或 opacity，而阴影/模糊固定在静止元素上。例如用 ::before 承载模糊效果，再对它做位移或缩放：
立即学习“前端免费学习笔记（深入）”；
.card {
position: relative;
}
.card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: #000;
filter: blur(12px);
opacity: 0.3;
z-index: -1;
/* 关键：对伪元素做 transform 动画 */
animation: floatBlur 3s ease-in-out infinite;
}
@keyframes floatBlur {
0%, 100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-10px) scale(1.02); }
}这样视觉上像模糊在浮动，实际动的是位置和缩放，filter 本身没变。
用 SVG 滤镜替代 CSS filter: blur()
CSS 的 filter: blur() 在动画中性能极差，但 SVG <feGaussianBlur> 配合 transform 可以更可控地硬件加速：
<svg width="0" height="0" style="position: absolute">
<defs>
<filter id="smoothBlur" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="8" />
</filter>
</defs>
</svg>
<p>.animated-box {
filter: url(#smoothBlur);
animation: moveWithFilter 2s linear infinite;
}</p><p>@keyframes moveWithFilter {
to { transform: translateX(100px); } /<em> 只动 transform </em>/
}注意：SVG 滤镜需确保已注入 DOM（可 inline 或通过 <use> 引用），且不能依赖动态 JS 修改 stdDeviation 值 —— 那又会退回到低效路径。
真正卡顿的时候，别硬调 box-shadow 的 transition 时间，先确认是否真的需要实时模糊/阴影动画；多数 UI 场景里，用位移+透明度模拟出的“呼吸感”，比原生模糊动画更稳、更省电、更兼容。
