backdrop-filter 无法用 @keyframes 实现平滑动画，因其被 css 规范定义为非可动画属性，chrome、safari、firefox 均不支持过渡；可行方案是固定 backdrop-filter 值，仅对 opacity 或 transform 动画。
backdrop-filter 在动画中根本不会渐变
直接说结论：backdrop-filter 无法用 @keyframes 做平滑过渡，浏览器不支持对它的动画（包括 blur()、contrast() 等任何函数）。你写的 backdrop-filter: blur(0px) → blur(12px) 看起来像在动，实际只是离散跳变，或干脆卡在初始值。
原因很简单：CSS 规范里 backdrop-filter 被列为「non-animatable property」，连 transition 都不认，更别说关键帧了。Chrome、Safari、Firefox 全部一致无视动画声明。
- 常见错误现象：
backdrop-filter在@keyframes里写了两帧，但预览时背景要么全模糊、要么全清晰，中间没有过渡 - 使用场景别硬套动画：磨砂背景本身是静态视觉层，真正要动的应该是它的「出现时机」或「叠加状态」，比如配合
opacity或transform - 兼容性影响：哪怕加了
will-change: backdrop-filter或-webkit-backdrop-filter，也改不了它不可动画的本质
用 opacity + backdrop-filter 实现「淡入磨砂」效果
真正可行的做法是把「磨砂」和「淡入」拆开：磨砂背景保持常驻（backdrop-filter: blur(12px)），只对容器的 opacity 做动画。人眼感知上就是“磨砂感随透明度浮现”，效果几乎无差别，且 100% 兼容。
关键点在于：必须确保磨砂区域背后有可透出的内容（比如 body 有背景图/色，或父容器设置了 background），否则 backdrop-filter 没东西可滤。
立即学习“前端免费学习笔记（深入）”；
- HTML 结构要满足分层：磨砂容器需是半透明的 overlay，不能遮死底层内容
- 示例写法：
.glass { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); background: rgba(255, 255, 255, 0.1); opacity: 0; animation: fade-in 0.3s ease-out forwards; } @keyframes fade-in { to { opacity: 1; } } - 注意
background的 alpha 值别设为 0 ——rgba(0,0,0,0)会让 backdrop 失效，至少得rgba(0,0,0,0.01)
移动端 Safari 的 backdrop-filter 动画陷阱
iOS 16+ 虽然支持 backdrop-filter，但一旦容器有 transform（哪怕是 translateZ(0)）、will-change 或 overflow: hidden，就极大概率触发渲染 bug：磨砂失效、闪屏、或整个 layer 被强制 rasterize 导致动画卡顿。
- 常见错误现象：在 iPhone 上动画一播放，磨砂突然消失，或页面滚动时玻璃效果闪烁
- 实操建议：禁用所有非必要
transform；不用will-change: transform；避免父容器设overflow: hidden - 性能影响：Safari 对
backdrop-filter的合成路径非常敏感，加一层clip-path或mask就可能让 GPU fallback 到 CPU 渲染
替代方案：用 SVG 模糊滤镜模拟可动画 backdrop
如果真需要模糊强度随时间变化（比如从 0→12px 渐进），唯一可靠路径是绕过 CSS，用 SVG <filter></filter> + <fegaussianblur></fegaussianblur>，再通过 JS 控制 stdDeviation 属性。虽然重，但能真正动画。
适用场景有限：仅推荐用于小范围、低频更新的 UI 元素（如悬浮 tooltip、弹窗 header），别用在滚动列表或全屏 overlay 上。
- 核心代码逻辑：
const filter = document.querySelector('#glass-filter feGaussianBlur'); let step = 0; const animate = () => { if (step <= 12) { filter.setAttribute('stdDeviation', step); step += 0.2; requestAnimationFrame(animate); } }; - 注意：SVG 滤镜默认作用域是元素自身，要让它作用于「背后内容」，得配合
filterUnits="userSpaceOnUse"和绝对定位覆盖 - 容易被忽略的点：每次修改
stdDeviation都会触发重绘，频繁调用（如 60fps）在低端安卓机上明显掉帧
