filter 动画失效主因是插值中断，需统一数值单位（如 grayscale(1)→grayscale(0)）、显式声明 transition、强制 GPU 合成，并用 setTimeout 替代 transitionend 监听。
直接写 transition: filter 0.3s 很可能没动画——不是你代码写错，是浏览器对 filter 的插值支持本身就不稳定，尤其在 Safari 和旧版 Android WebView 上容易硬切。
为什么 filter: grayscale() 过渡不触发
根本原因在于 filter 是复合属性，浏览器需对函数内部数值做插值计算。但若初始/结束值单位不一致、或用了 none 这类非数值占位符，插值就断了。
- ❌ 错误示范：
filter: none;→filter: grayscale(1);（none不参与插值） - ✅ 正确写法：统一用小数，
filter: grayscale(1);→filter: grayscale(0); - ⚠️ 混用单位会失效：比如
grayscale(100%)和grayscale(0)搭配，部分 Chrome 版本会当字符串处理，跳过中间帧 - ? 必须显式声明
transition: filter 0.3s ease，不能靠transition: all带动
hover 时图片抖动或闪一下
这不是 CSS 写错了，是滤镜变化引发 layout shift 或渲染层切换导致的视觉抖动。
- 给图片加
backface-visibility: hidden或transform: translateZ(0)，强制 GPU 层合成 - 确保图片尺寸固定：用
width/height或aspect-ratio，别依赖object-fit动态缩放 - 如果同时用多个 filter（比如
grayscale(1) blur(1px)），hover 前后必须写全，否则未声明项会被重置为默认值，造成意外跳变
监听过渡完成不能只靠 transitionend
transitionend 对 filter 的兼容性极差：Firefox 偶尔触发，Chrome 经常静默，Safari 只在特定组合下响应。
立即学习“前端免费学习笔记（深入）”；
- ✅ 更可靠的做法：用
setTimeout，时间值严格匹配 CSS 中的transition-duration - ? 进阶建议：把时长抽成 CSS 变量，例如
--trans-time: 0.3s，JS 用getComputedStyle读取后做延时，避免硬编码不一致 - ? 不要监听
filter属性变更——它不是可观察的 DOM 属性，MutationObserver 也无效
深色模式、打印或移动端适配容易被忽略
滤镜效果在不同上下文里可能完全失效或反向生效，尤其当系统级色彩策略介入时。
- 深色模式下，
grayscale(1)可能看起来更“灰”，建议用@media (prefers-color-scheme: dark)重置为grayscale(0.8)等柔和值 - 打印样式表中，
filter默认被忽略，需显式加@media print { img { filter: none !important; } } - 低端安卓设备上，单纯
translateZ(0)不够，得配合will-change: filter提前提示渲染器——但别滥用，可能引发额外重绘
真正卡住人的从来不是怎么写第一行 filter，而是初始值是否可插值、渲染层是否稳定、以及过渡结束时你根本不知道它啥时候完——这些点不提前踩一遍，动效永远在“差不多”和“就是不动”之间反复横跳。
