transition: filter 常不生效，因浏览器默认不将filter视为可插值属性，需显式声明初始值（如blur(0px)）、单位统一为px、will-change: filter提前提示、起止函数结构完全一致，缺一则跳变或失效。
支持，但必须满足四个硬性条件：显式声明初始 filter、单位统一为 px、will-change: filter 提前提示、起止状态函数结构完全一致；缺一就会跳变或直接失效。
为什么 transition: filter 常常不生效？
根本原因不是写法错，而是浏览器默认不把 filter 当作可插值属性处理——尤其对 blur() 这类 SVG 滤镜函数。Chrome 100+、Firefox 115+ 才稳定支持，Safari 直到 v17.6 仍有首帧卡顿、跳变问题。
-
filter: blur(0)或blur(4)（无单位）→ 浏览器拒绝插值，直接硬切 - 初始状态没写
filter，只在:hover里加 → 缺少过渡起点，动画被忽略 - 父容器写了
will-change: filter→ 过度触发重绘，反而拖慢性能 - 混入
drop-shadow()或url(#svg-filter)→ 整个filter链退化为跳变
blur() 过渡必须用 px 单位
这是最容易踩的坑：blur(4)、blur(4rem)、blur(0) 全部无效；只有 blur(0px) 到 blur(6px) 这种严格带 px 的写法才能触发插值。
- Safari 尤其敏感：哪怕一个地方漏了
px，整段过渡逻辑就跳过 -
blur(0px)必须显式写出，不能省略单位，否则等同于未定义 - 建议模糊半径控制在
2px–6px区间：再大，iOS 中低端设备掉帧明显
多函数混用时如何避免跳变？
浏览器按函数位置逐个插值，不是按名称匹配。起止状态的 filter 声明必须函数名、数量、顺序、单位全部一致，缺位要补默认值。
- 错误写法：
filter: blur(0px);→filter: blur(4px) grayscale(1);（新增函数，结构突变） - 正确写法：
filter: blur(0px) grayscale(0) brightness(1);→filter: blur(4px) grayscale(1) brightness(1); -
brightness(1)、contrast(1)这类“无效果”值也得写上，否则插值维度错位 - 慎用
sepia()和hue-rotate()：旧版 Safari 对它们的插值支持不稳定
真正难的不是写对语法，而是在 Safari 上让首次 hover 不闪、不白屏、不卡顿——这往往取决于 will-change 加在哪、伪元素是否包裹背景、以及模糊半径有没有被 JS 动态改写又没重置。这些细节不暴露在 DevTools 里，但会决定动效是否可用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
