filter:blur动画卡顿因非GPU加速，需用transform:translateZ(0)或will-change:filter启用硬件加速，控制模糊半径≤8px，避免overflow:hidden裁剪，并用keyframes分层处理退场与进场。
filter:blur 动画为什么卡顿甚至直接不触发
因为 filter:blur() 默认不是 GPU 加速属性，浏览器会走 CPU 合成路径，尤其在中低端设备或复杂 DOM 下容易掉帧、跳变，甚至动画压根没效果——特别是你用 transition 直接写在 filter 上时。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 强制开启 GPU 加速：给动效元素加
transform: translateZ(0)或will-change: filter（注意后者别滥用，只在真正要动画的元素上设） - 别用
transition: filter 0.3s做切场，改用@keyframes+animation，更可控 - 模糊半径别设太大（比如
blur(20px)），超过8px后性能陡降，视觉增益却很有限 - 确保父容器没有
overflow: hidden且裁剪了模糊溢出区域——blur()会向外扩散像素，被裁掉就看起来像“没模糊”
两个页面/模块切换时如何避免模糊“撕裂”或闪烁
常见现象是旧内容还没完全模糊完，新内容就硬切进来，或者两者同时显示导致重叠糊成一团。根本原因是没控制好 z-index 层级和 opacity 过渡节奏。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用两层容器：一个负责模糊退场（
blur(6px) → blur(0)），另一个负责淡入进场（opacity: 0 → 1），两者动画时长一致但方向相反 - 退场元素加
pointer-events: none，防止模糊过程中还能点到它 - 进场元素初始设
visibility: hidden，动画第一帧再改成visible，避免未渲染时占位或触发 layout - 关键帧里把
blur()和opacity拆开控制，例如退场：0% 是blur(0) opacity: 1，100% 是blur(6px) opacity: 0
blur 动画在 Safari 上失效或表现异常
Safari 对 filter 动画的支持一直比较保守，尤其在 iOS 15–16 上，@keyframes 里直接写 blur() 可能被忽略，或只执行首尾帧。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须给元素加
-webkit-backface-visibility: hidden，这是 Safari 触发 filter 动画的关键开关 - 避免在
filter中混用多个函数（如blur(2px) brightness(1.2)），Safari 更倾向只认第一个；如果真要组合，拆成两个独立动画或用 SVG filter - 检查是否用了
will-change: auto或没设值——Safari 对will-change更敏感，设成will-change: filter更稳 - iOS Safari 不支持小数像素的
blur()（如blur(0.5px)），统一用整数
如何让模糊过渡看起来“自然”而不是“脏”或“雾化”
模糊本身不等于柔焦，blur(4px) 在大图上可能像蒙了一层灰，尤其背景有高对比文字或边框时，边缘会发虚、失锐度。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先对纯色背景或渐变层做模糊，避开含文本、图标、细线的区域；真要模糊内容区，先用
backdrop-filter: blur(4px)（仅背景），而非filter: blur()（整个元素） - 搭配
opacity使用时，把模糊峰值放在透明度最低点（比如 50% 帧时blur(6px) opacity: 0.3），避免“全糊+全显”的中间态 - 如果目标是模拟毛玻璃效果，用
backdrop-filter+ 半透明白色遮罩层，比单纯filter: blur()更干净 - 测试时关掉系统“减少运动”设置（macOS/iOS），否则所有 CSS 动画会被禁用或降级
模糊切场真正的难点不在写几行 keyframes，而在于它和 layout、paint、composite 三阶段都强耦合——稍不注意，一个 display: none 切换就能让整个动画断掉。动手前先用 Chrome DevTools 的 Rendering 面板勾上 “Paint flashing” 和 “FPS meter”，看看到底哪一帧在掉。
