filter 动画需显式声明 transition: filter 而非 all，grayscale()值统一用 0–1 小数，配合 will-change: filter 提升性能。
filter:grayscale 动画不起作用？检查 transition 是否作用在 filter 上
直接写 transition: all 0.3s 很可能失效——filter 是复合属性，浏览器对它的过渡支持依赖具体函数和值类型。灰度值用的是 grayscale(1) 和 grayscale(0) 这种数值型函数，必须显式声明过渡目标属性。
- ✅ 正确写法：
transition: filter 0.3s ease; - ❌ 常见错误：
transition: all 0.3s或transition: opacity 0.3s（opacity 变了但 filter 没动） - ⚠️ 注意：IE 完全不支持
filter过渡，Edge 17+ 才开始稳定支持，移动端 iOS Safari 9.3+ 可用
hover 时图片闪一下才变彩色？避免 filter 值单位缺失或计算偏差
grayscale() 接收的是无单位数字（0–1），不是百分比。写成 grayscale(100%) 虽然 CSS 解析器会接受，但部分浏览器（尤其是旧版 Chrome）在动画插值时会把它当作字符串处理，导致中间帧计算异常，出现“跳变”或“卡顿”。
- ✅ 统一用小数：
filter: grayscale(1);→filter: grayscale(0); - ❌ 避免混用：
grayscale(100%)和grayscale(0)搭配，或和blur(2px)等其他 filter 函数混写却不重置全部值 - ? 小技巧：如果同时要用多个 filter（比如灰度 + 模糊），务必在 hover 前后都写全，否则未声明的函数会被重置为默认值，造成意外抖动
图片动效卡顿或掉帧？优先用 will-change 和硬件加速
filter 动画属于高开销操作，尤其在中低端设备上容易掉帧。单纯加 transform: translateZ(0) 已不够用，现代做法是明确告诉浏览器这个元素将频繁变化。
- ✅ 加上
will-change: filter;（注意只在需要动画的元素上加，别全局滥用） - ✅ 更稳妥的组合：
transform: translateZ(0); will-change: filter; - ⚠️ 不要对大量图片同时触发 hover 动画，容易触发重排 + 重绘风暴；可加
pointer-events: none;在非交互状态降级响应
JS 控制灰度切换时，class 切换比内联 style 更可靠
用 JS 直接改 element.style.filter = 'grayscale(0)' 看似简单，但容易被 CSS 优先级覆盖，或与已有内联样式冲突。更可控的方式是通过 class 控制状态，把样式逻辑留在 CSS 里。
立即学习 “ 前端免费学习笔记（深入）”；
- ✅ 推荐结构：
img {filter: grayscale(1); transition: filter 0.25s; }<br>img.colorful {filter: grayscale(0); }然后 JS 用
img.classList.toggle('colorful') - ❌ 避免反复 setAttribute(‘style’, …)，尤其在循环或事件高频触发场景下
- ? 补充：如果需动态控制灰度程度（比如滚动渐变），才考虑用
style.filter，但务必统一单位、缓存 DOM 引用、节流更新频率
灰度到彩色的过渡看着简单，真正跑顺要盯住三件事：transition 明确指向 filter、grayscale() 值始终用小数、动画元素得让浏览器提前知道它要动。细节错一点，效果就断在半路。
