正确使用 transition 与 filter: blur() 可实现流畅模糊动画，需初始化 filter、避免 display: none、统一 filter 值，并通过硬件加速和范围限制提升性能，适用于背景虚化等场景。
在使用 CSS 实现模糊动画时，transition 与 filter: blur() 结合可以创建平滑的视觉效果。但实际应用中，如果不注意细节，可能会导致动画卡顿或不生效。下面介绍如何正确使用它们实现流畅的模糊过渡动画。
1. 基本语法与结构
要实现一个元素从清晰到模糊（或反之）的过渡，需要设置 filter 属性并配合 transition 来控制变化速度。
示例：鼠标悬停时添加模糊效果
.box {
filter: blur(0);
transition: filter 0.4s ease;
}
.box:hover {
filter: blur(10px);
}
这里将 filter 的变化加上了 0.4 秒的缓动过渡，使模糊效果更自然。
立即学习“前端免费学习笔记（深入）”；
2. 提升动画性能
filter: blur() 是一个计算量较大的属性，直接对大面积元素做模糊过渡可能导致掉帧。可以通过以下方式优化：
-
启用硬件加速：给元素添加
transform: translateZ(0)或will-change: filter，促使浏览器将其提升为独立图层。 -
限制模糊范围：避免对整个页面或大图直接模糊，可包裹在一个容器内并设置
overflow: hidden控制影响区域。 - 控制过渡频率：频繁触发 hover 可能造成闪烁或延迟，可通过防抖思路减少触发次数（JS 控制类名切换）。
3. 常见问题与解决方案
有时你会发现模糊动画“跳变”而不是渐进式过渡，原因如下：
-
未初始化 filter：如果默认状态没写
filter: blur(0)，浏览器无法计算过渡起点，应始终显式定义起始值。 -
其他 filter 值干扰：若同时使用了 brightness、contrast 等，需统一写在一行，否则会覆盖。例如：
filter: blur(0) brightness(1)。 -
display: none 阻断过渡：隐藏时用
opacity: 0和pointer-events: none替代display: none，以保持 DOM 状态连续性。
4. 实用场景示例
比如做一个背景高斯模糊的弹窗：
.modal-backdrop {
filter: blur(0);
transition: filter 0.3s ease-in-out;
}
.modal-open .modal-backdrop {
filter: blur(3px);
}
配合 JS 切换类名，就能实现背景虚化渐入效果，增强用户体验。
基本上就这些。只要初始化得当、注意性能优化，CSS 的 transition 与 filter: blur() 能轻松实现丝滑的模糊动画。关键在于细节处理和合理使用硬件加速。
