filter blur 动画默认不触发过渡，因 filter 属非可动画属性，需显式声明 transition 且初始值不能为 none；应使用 blur(0px)、will-change: filter、伪元素模拟或 backdrop-filter 替代以实现流畅梦幻效果。
filter blur 动画为什么默认不触发过渡？
因为 filter 属于「非可动画 CSS 属性」，浏览器不会自动为它添加过渡效果——哪怕你写了 transition: filter 0.3s，blur 值变化依然会突变。根本原因在于：CSS 规范中 filter 的动画支持依赖于底层是否实现了插值逻辑，而早期实现只对 blur() 的数值部分做线性插值，且必须显式声明过渡属性和时间。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须写全
transition: filter 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)（不能只写transition: all） -
blur()的单位必须统一（推荐用px，避免混用px和rem） - 初始状态不能是
filter: none，要写成filter: blur(0px)，否则部分 Safari 版本会跳过过渡
如何让模糊过渡真正“梦幻”而不是卡顿？
单纯加 blur() 容易导致边缘发虚、文字糊成一片，还可能触发重排（layout）或低帧率。关键不是堆参数，而是控制作用范围和合成层。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给需要模糊的元素加
will-change: filter，提前提示浏览器启用 GPU 合成（但别滥用，仅用于频繁动画的元素） - 避免对
<body>或大容器直接加blur()，优先模糊伪元素或绝对定位的遮罩层 - 搭配
opacity一起过渡：比如从filter: blur(0px); opacity: 1→filter: blur(12px); opacity: 0.85，视觉上更柔和 - 慎用高斯半径：超过
20px在低端设备上容易掉帧，iOS Safari 对blur()>10px的性能敏感度明显上升
转场时内容被模糊“吃掉”怎么办？
常见现象：切换页面/弹窗时，背景模糊了，但上面的文字或按钮也跟着糊，交互区域不可点或误触。这不是 bug，是 filter 作用于整个渲染树的结果。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把内容层（如按钮、标题）单独提出来，用
position: relative+z-index确保在模糊层之上 - 不要对父容器设
filter，改用伪元素模拟模糊背景：.overlay::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: inherit; filter: blur(8px); z-index: -1; } - 如果必须模糊整个模块，记得重置子元素的
filter: none，但注意：这不生效——filter会继承且不可被子元素取消。正确做法是用backdrop-filter替代（见下一条）
backdrop-filter 比 filter 更适合转场吗？
是的，但限制明确：backdrop-filter 只模糊元素背后的区域，不影响自身内容，天生适合模态框、导航栏等“玻璃态”转场。但它不支持 IE 和旧版 Safari（iOS -webkit-backdrop-filter）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用法必须配合半透背景：
background: rgba(255,255,255,0.15)+backdrop-filter: blur(10px) - 过渡依然要手动声明：
transition: backdrop-filter 0.35s, background 0.35s - 安卓 Chrome 100+ 才稳定支持动画，低于此版本建议降级为
filter+ 伪元素方案 - 别在
body上直接用backdrop-filter，会导致整页重绘卡顿；限定在固定尺寸、有明确边界的容器内
blur(15px) 更可信。这些细节没写进规范，但用户眼睛立刻能分辨出来。 
