如何通过CSS Transition实现图片滤镜从模糊到清晰的切换效果

能，但必须用transition控制filter属性本身；blur()值须从非零过渡到0px且单位为px，否则动画不触发；需启用硬件加速（如will-change: filter）、显式声明初始filter、保持函数顺序一致，并限制blur值在2–6px以兼顾Safari兼容与性能。

能，但必须用 transition 控制 filter 属性本身，而不是写 transition-filter（这个属性根本不存在）；blur() 值从非零过渡到 0px 才能平滑变清晰，且单位必须是 px，否则动画不触发。

为什么 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 的 transition 支持极差，常出现首帧白屏、跳变或卡顿；blur 值超过 8px 在中低端设备上 FPS 明显下降。

• blur 值控制在 2px–6px 之间，blur(4px) 是兼顾效果与性能的常用值
• 旧版 Safari 需补 -webkit-filter，现代浏览器可省略（但留着更稳妥）
• 避免同时用 scale() 和 blur() 触发多层重绘，容易加剧闪烁
• 如果图片是 <img> 标签，确保其容器有明确宽高，不要依赖 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 直接跳过过渡逻辑。