filter过渡失效主因是函数类型或参数不匹配，须用相同函数、一致顺序和单位；多函数过渡需同声明内严格对应；性能差时可加transform: translateZ(0)触发硬件加速。
filter 过渡失效的常见原因
直接对 filter 设置 transition 却没动画？大概率是浏览器不支持该属性的过渡，或值类型不匹配。CSS 规范中，filter 是一个复合属性，其子函数（如 blur()、contrast()、hue-rotate()）只有部分支持插值过渡，且必须用相同函数类型、相同参数数量才能平滑过渡。
- 不能从
blur(0px)直接过渡到grayscale(1)—— 函数类型不同，浏览器会跳变 -
drop-shadow()和blur()混用也会中断过渡，哪怕都写了transition: filter 0.3s - 某些旧版 Safari（≤15.4）对
hue-rotate()或多参数drop-shadow()的过渡支持不完整
只用同一 filter 函数做过渡才可靠
确保起始和结束状态使用完全相同的 filter 函数，仅数值变化。这是最稳妥的写法，兼容性好、行为可预测。
button {
filter: contrast(1);
transition: filter 0.25s ease;
}
button:hover {
filter: contrast(1.8);
}
其他可用组合示例：
-
blur(0px) → blur(4px)（注意单位必须一致，blur(4)无效） -
opacity(1) → opacity(0.7)（注意：这不是opacity属性，而是filter: opacity()，二者行为略有差异） -
hue-rotate(0deg) → hue-rotate(90deg)（度数单位不可省略）
多个 filter 同时过渡的写法限制
若需同时动多个效果（比如模糊 + 变暗），必须把它们写在同一个 filter 声明里，且顺序、函数名、参数个数全部对应。浏览器按位置逐个插值，错位即失效。
img {
filter: blur(0px) brightness(1);
transition: filter 0.3s cubic-bezier(0.2, 0.8, 0.4, 1);
}
img:hover {
filter: blur(2px) brightness(0.6);
}
错误示范（顺序颠倒或缺参数）：
-
filter: brightness(1) blur(0px)→filter: blur(2px) brightness(0.6)（顺序不一致） -
filter: blur(0) brightness(1)→filter: blur(2px) brightness(0.6)（blur(0)缺单位，被解析为无效值）
性能与硬件加速的隐含影响
filter 过渡默认不触发 GPU 加速，尤其 blur() 在中低端设备上容易掉帧。加 will-change: filter 有帮助，但别滥用；更推荐对需要高频过渡的元素显式启用合成层：
.animated-filter {
filter: blur(0px);
transition: filter 0.2s;
/* 触发独立图层，提升 blur/hue-rotate 性能 */
transform: translateZ(0);
}
注意：transform: translateZ(0) 在现代 Chrome/Firefox 中仍有效，但 Safari 16.4+ 更倾向用 contain: paint 替代。真正卡顿时，优先检查是否在滚动区域里批量应用了 blur() —— 那比过渡写法本身更耗资源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
