灰度图片hover恢复彩色动画不生效的主因是filter未在初始状态显式声明且缺transition；正确写法需同时设置初始filter、hover时完整filter值、transition属性，并针对safari加translatez(0)触发硬件加速，兼容性需js运行时检测降级。
灰度图片 hover 恢复彩色时动画不生效？检查 transition 是否作用于 filter
直接给 img 加 transition: filter 0.3s 是最简方案，但很多人漏掉关键点：filter 必须在初始状态显式声明，哪怕值是 grayscale(0)。否则浏览器无法插值，动画会“跳变”。
- 错误写法：
img { filter: grayscale(1); } img:hover { filter: grayscale(0); }（缺初始transition和默认filter） - 正确写法：
img { filter: grayscale(1); transition: filter 0.3s ease; } img:hover { filter: grayscale(0); } - 注意：
ease比linear更自然；若需精确控制缓动，可用cubic-bezier(.25,.46,.45,.94)
filter 动画在 Safari 上卡顿或失效？加 will-change 或 transform 触发硬件加速
Safari 对 filter 的 GPU 加速支持较弱，尤其多图同时 hover 时容易掉帧。单纯加 transition 不够，得主动提示浏览器该属性会频繁变化。
- 加
will-change: filter到图片样式里（仅对 hover 动画有效，避免全局滥用） - 更稳妥的写法：
img { transform: translateZ(0); filter: grayscale(1); transition: filter 0.3s; }——translateZ(0)强制创建合成层 - 慎用
will-change: transform：它会让元素提前升层，可能引发内存占用升高，只在确认卡顿存在时启用
多个 filter 同时过渡（比如 grayscale + brightness）要写全，不能只写部分
如果除了灰度还叠加了其他滤镜（如暗色背景下的 brightness(1.2)），transition 必须覆盖全部 filter 值，否则未声明的部分会立即切换，破坏动画连贯性。
- 错误：
img { filter: grayscale(1) brightness(0.8); transition: filter 0.3s; } img:hover { filter: grayscale(0); }→brightness会瞬间跳到默认 1 - 正确：
img:hover { filter: grayscale(0) brightness(1.2); }，且初始和 hover 状态的 filter 函数顺序、数量必须完全一致 - 函数顺序很重要：
grayscale(1) contrast(0.9)和contrast(0.9) grayscale(1)渲染结果不同，过渡时顺序错乱会导致视觉抖动
IE 或旧版 Edge 不支持 filter？用 SVG filter fallback 或 JS 降级
filter: grayscale() 在 IE 完全不支持，Edge 12–17 仅部分支持。纯 CSS 方案无法兼容，必须准备退路。
- SVG fallback：内联一个
<svg></svg>定义<filter></filter>，用url(#grayscale)引用，但 SVG filter 不支持 transition，只能做静态灰度 - JS 降级推荐：
if (!CSS.supports('filter', 'grayscale(0)')) { ... }检测支持性，不支持时改用 class 切换 opacity 或 background-image 替代 - 别依赖
@supports (filter: grayscale(0))：某些旧 Chrome 版本识别有误，运行时检测更可靠
真正麻烦的不是写法，是 filter 过渡在不同设备上渲染路径差异大——手机端 GPU 资源紧张时，哪怕写了 will-change，连续 hover 多张图仍可能掉帧。上线前务必在真机上滑动测试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
