blur动画卡顿或闪烁的根源是filter: blur()默认不进入gpu合成层，导致频繁cpu重绘；需用will-change: filter或translatez(0)提升图层，并避免与opacity/transform混用。
blur 动画卡顿或闪烁的根源是啥
直接说结论：filter: blur() 在 CSS 动画里不是“天然流畅”的，尤其在低性能设备或复杂 DOM 下，容易掉帧、闪屏、甚至触发重排。根本原因不是写法错，而是浏览器对 filter 的硬件加速策略不统一——它默认不进 GPU 合成层，动画时频繁重绘 CPU 压力大。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 强制提升图层：给动
blur的元素加will-change: filter，或者更稳妥的transform: translateZ(0)（注意别滥用，每个都加会反向拖慢） - 避免和
opacity或transform混合动画——三者叠加时，Chrome 旧版（ - 别用
%或em单位写blur()值，只接受px（如blur(2px)），否则部分 Safari 版本解析异常，动画跳变
如何让模糊→清晰过渡真正“线性可控”
CSS 的 transition: filter 0.3s 看似简单，但实际是非线性的——因为 blur() 本身不是匀速变化的视觉量，人眼对“从 8px 模糊到 0px”的感知，前半段变化几乎不可见，后半段又太突兀。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
@keyframes手写关键帧，把中间点拆细，比如：0% { filter: blur(6px); } 60% { filter: blur(2px); } 100% { filter: blur(0px); }，比纯线性过渡更符合视觉节奏 - 配合
animation-timing-function: cubic-bezier(.22,.61,.36,1)（类似 easeOutQuint），压慢开头、拉长收尾，避免“啪一下就清了” - 如果 JS 控制（比如滚动触发），别直接设
element.style.filter = blur(${val}px)，改用requestAnimationFrame节流，且val建议用插值计算而非线性映射
Safari 上 filter 动画失效或崩溃的典型场景
iOS 16.4+ 和 macOS Ventura 之后，Safari 对 filter 动画加了更严格的合成限制：一旦父容器有 overflow: hidden + 子元素带 filter + 同时发生尺寸变化（比如 height 从 0→auto），就可能直接跳过动画、回退到静态值，甚至导致页面白屏。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 移除父级的
overflow: hidden，改用mask-image或clip-path做裁剪（它们和filter共存更稳定） - 避免在
blur动画进行中同时触发动态height或max-height过渡——拆成两个阶段：先完成尺寸展开，setTimeout(() => {...}, 10)后再启 blur 动画 - 真机调试时，打开 Safari 开发者工具 → “Elements” 面板 → 右键元素 → “Show Paint Rectangles”，看模糊区域是否被标红（表示未进合成层），这是性能瓶颈的直观信号
用 JS 精确控制 blur 进度时的精度陷阱
很多人用 IntersectionObserver 或 scroll 事件驱动 blur 值，但直接按滚动距离比例算 blur 像素值，常出现“快到底才开始模糊”或“刚进视口就全糊”。问题不在逻辑，而在单位换算失真和浮点误差累积。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 别用
scrollTop / maxHeight直接乘模糊最大值，改用归一化区间映射：const t = Math.min(Math.max((scrollY - start) / range, 0), 1)，再套blurValue = maxBlur * (1 - easeOutCubic(t)) - JS 中设置 style 时，显式保留一位小数：
el.style.filter = `blur(${blurValue.toFixed(1)}px)`，防止 Chrome 把0.0000001px当作0导致动画中断 - 如果涉及高刷新率屏幕（120Hz），
requestAnimationFrame回调里别做复杂计算，blur 值建议预先查表（LUT）或用 WebAssembly 算，否则帧率一抖，过渡就断层
最麻烦的从来不是怎么写 blur，而是搞清当前浏览器版本、GPU 驱动、甚至用户是否开了“降低动画频率”系统设置——这些都会让同一段代码表现完全不同。上线前至少在 iOS 17 Safari、Chrome 125、Edge 124 三个环境各测一次滚动+悬停双触发路径。
