如何用CSS Transition实现图片滤镜从模糊到清晰的切换

完全可以实现，但有一个关键前提——你必须通过 transition 属性直接控制 filter 本身的变化，而不是试图编写一个不存在的 transition-filter 属性来达成目的。此外，blur() 的数值需要从非零值平滑过渡到 0px，这样才能呈现出由模糊逐渐变清晰的流畅动画效果，并且单位必须明确标注为 px，否则过渡动画将无法正常触发。

CSS Transition 实现图片滤镜模糊到清晰的平滑切换技巧

为什么 hover 时 blur() 没有过渡效果，或者直接闪变清晰？

一个非常常见的现象是：当鼠标悬停上去时，图片“啪”地一下就变得清晰了，中间没有任何渐变过渡的过程；又或者第一次 hover 时会出现明显的卡顿感以及边缘闪烁的问题。究其根本原因，通常并不是 CSS 语法写错了，而是浏览器没有对 filter 属性启用硬件加速支持，同时 blur(0) 会被浏览器视为“无滤镜”的默认状态，从而直接跳过了插值计算环节。

• 务必给目标元素添加 transform: translateZ(0) 或者 will-change: filter 属性——后者对性能的提示更加精准，但使用时要适度，尤其不要随意添加到父容器元素上
• blur() 函数的参数单位必须是 px，写成 blur(4) 或者 blur(4rem) 都会导致过渡效果完全失效
• 元素的初始状态不能省略 filter 声明，需要显式地写出 filter: blur(4px)，而不是等到 hover 状态时才动态添加
• transition 属性必须定义在常态选择器中，例如 .img-hover { transition: filter 0.4s ease; }，千万不要只写在 :hover 伪类状态里面

怎样编写才能兼容 Safari 并且保持不掉帧？

在 iOS Safari 16.6 版本之前，对 filter 过渡效果的支持表现非常不理想，经常会出现首帧白屏、画面跳变或者明显卡顿的情况。此外，当 blur 模糊值超过 8px 时，在中低端设备上 FPS 会出现显著下降。

• 将 blur 值控制在 2px–6px 的范围之间是一个良好的实践习惯，blur(4px) 是兼顾视觉效果与性能表现的常用推荐值
• 对于旧版 Safari 浏览器，需要补充 -webkit-filter 私有前缀，虽然现代浏览器可以省略，但保留前缀会更为稳妥
• 尽量避免同时使用 scale() 和 blur() 变换，这两者叠加容易触发多层重绘机制，从而加剧画面闪烁问题
• 如果图片是 标签元素，务必确保它的外层容器拥有明确的宽度和高度，不要依赖 object-fit: cover 来进行动态尺寸缩放

多个 filter 函数混合使用时为什么会出现跳变？

举个例子，当你想同时过渡 grayscale() 和 blur() 两个滤镜效果时，hover 后颜色和模糊度却不是同步变化的，而是先后跳变完成——这是因为浏览器无法自动匹配不同滤镜函数之间的插值计算路径。

• 前后声明的 filter 函数顺序、数量以及类型必须保持完全一致，打个比方：filter: grayscale(0) blur(4px); 过渡到 filter: grayscale(1) blur(0px);
• 缺失的参数需要补上默认值，例如 brightness(1)、contrast(1) 这类参数也必须明确写出，否则浏览器无法正确对齐插值维度
• 谨慎使用 drop-shadow() 滤镜，因为它本身不支持过渡动画，混入 filter 链中可能会导致整个过渡效果退化成为生硬的直接切换
• 如果确实需要叠加多种滤镜效果，优先考虑使用 transition: all 0.35s ease，并且确保起始状态和结束状态下的所有属性都定义完整无误

最后，最容易忽略的一点是：transition 属性必须同时指定持续时长和缓动函数，只写成 transition: filter; 等同于没有定义过渡效果；而 blur 值为 0px 时仍然需要标明单位，否则 Safari 浏览器会直接跳过整个过渡逻辑。