不能。css 中没有 transition-filter 属性，需对 filter 属性本身设置 transition；仅 blur()、grayscale()、contrast() 等部分函数支持平滑过渡，drop-shadow() 等不支持，多函数混用易导致跳变。
transition-filter 能直接用吗？
不能。CSS 标准中没有 transition-filter 这个属性，它根本不存在。你写上也不会生效——浏览器会忽略这条声明。真正起作用的是对 filter 属性本身设置 transition，比如 transition: filter 0.3s ease;。关键在于：不是过渡某个叫 “filter” 的专用过渡属性，而是让 filter 这个可动画属性自己动起来。
哪些 filter 值支持平滑过渡？
只有部分 filter 函数支持 CSS 过渡（即浏览器能插值计算中间状态）。目前稳定支持的有：
-
blur()：从blur(0px)到blur(4px)可平滑过渡 -
grayscale()：从grayscale(0)到grayscale(1)（或100%）可过渡 -
contrast()、brightness()、opacity()（注意：opacity 是独立属性，但效果常和 filter 混用） -
sepia()、hue-rotate()理论上可过渡，但部分旧版 Safari 表现不稳定
不支持过渡的常见例子：drop-shadow()、url(#svg-filter)、多个函数混写时若含不支持项（如 filter: blur(2px) drop-shadow(0 0 4px black);），整个 filter 可能退化为“跳变”而非渐变。
图片 hover 灰度过渡的可靠写法
最简可行代码如下：
立即学习“前端免费学习笔记（深入）”；
.img-filter {
filter: grayscale(0);
transition: filter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.img-filter:hover {
filter: grayscale(1);
}
注意三点：
- 初始值必须显式写出（如
grayscale(0)），不能省略或靠继承，否则过渡起点不确定 - 推荐用
cubic-bezier(0.4, 0, 0.2, 1)替代ease，更接近自然缓入缓出 - 避免同时写多个 filter 函数又期望全部过渡——优先单用
grayscale()或blur()，需要组合时用 CSS 自定义属性分拆控制
模糊 + 灰度一起过渡容易踩的坑
如果硬要同时过渡两个效果，比如 hover 时既变灰又变模糊，不要这么写：
.bad { transition: filter 0.3s; }
.bad:hover { filter: grayscale(1) blur(2px); }
在 Chrome 115+ 和 Firefox 中可能正常，但在 Safari 16.4–17.2 中，blur() 会跳变（无过渡），只 grayscale() 动。稳妥做法是：
- 用 CSS 自定义属性分别控制：
--gray: 0; --blur: 0px;→ hover 时改--gray: 1; --blur: 2px;，再用filter: grayscale(var(--gray)) blur(var(--blur)); - 或者改用
will-change: filter提前提示渲染引擎（仅对复杂页面有必要） - 真要兼容老 Safari？放弃同时过渡，只选一个核心效果做动画
滤镜过渡看似简单，实际依赖浏览器对 CSS 函数插值的支持程度——别假设“写了 transition 就一定平滑”，先在目标浏览器里点几下 hover 看真实帧率。
