filter 动画必须显式声明 transition: filter，不能依赖 transition: all；需统一数值格式、写全滤镜组合、强制 gpu 加速并做好兼容性 fallback。
transition: filter 必须显式声明，不能依赖 all
直接写 transition: all .3s 很大概率让 filter 动画失效，尤其在 Safari 15.4–16.3 和部分 Android WebView 中。浏览器对复合属性 filter 的插值支持不依赖于 all，而需要明确目标属性。
- ✅ 正确：
transition: filter .4s ease-in-out - ❌ 错误：
transition: all .4s或transition: opacity .4s（opacity 变了，但 filter 没动） - 过渡必须写在默认状态（非
:hover）上，否则移出时无动画 - 时间建议 ≥ .2s：低于 .2s 人眼难察觉；超过 .6s 易显迟滞
grayscale() 参数必须统一用小数，别混用百分比
grayscale(1) 和 grayscale(100%) 在语法上等价，但动画插值时行为不一致。旧版 Chrome 会把带百分号的值当字符串处理，跳过中间帧，导致“咔哒”硬切。
- ✅ 推荐写法：
filter: grayscale(1);→filter: grayscale(0); - ❌ 避免混用：
grayscale(100%)和grayscale(0)、或grayscale(1)和blur(2px)组合却不重置 blur - 如果同时用多个滤镜（如
grayscale(1) brightness(0.9)），:hover中必须写全，否则未声明项会被重置为默认值，引发意外跳变
图片抖动或闪一下？强制 GPU 层 + 固定尺寸
滤镜变化可能触发渲染层切换或 layout shift，表现为鼠标移入瞬间轻微位移、边缘锯齿或闪烁。这不是 CSS 写错，而是浏览器重绘路径不稳定。
- 加
transform: translateZ(0)或backface-visibility: hidden强制启用 GPU 合成 - 确保图片宽高固定：用
width/height或aspect-ratio，避免依赖object-fit动态缩放 - 低端安卓设备可补
will-change: filter，但仅限 hover 触发时动态添加，别全局设 - 慎用
overflow: hidden包裹滤镜元素——某些旧版 Safari 会禁用硬件加速
IE/旧 WebView 不支持？fallback 方案要提前设计
IE 完全不支持 filter 过渡；微信内置 WebView、部分国产浏览器内核对 filter 动画支持极差。纯 CSS 方案无法覆盖时，得降级。
- 双图叠层是最稳 fallback：
.gray图（灰度 PNG）+.color图（原色 PNG），用opacity切换 - 不要用
filter: url(#svg-filter)替代——SVG 滤镜无法与transition联动，且兼容性更差 - 深色模式下
grayscale(1)可能显得过重，建议用@media (prefers-color-scheme: dark)改为grayscale(0.8) - 打印样式表中
filter默认被忽略，需显式加@media print { img { filter: none !important; } }
filter 动画不是“开了 transition 就自动平滑”，它高度依赖初始值和结束值的数值一致性、渲染层稳定性、以及目标环境的真实支持能力。很多“没效果”不是代码错，而是浏览器根本没走插值逻辑。**前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
