用filter: grayscale(1)→grayscale(0)配合transition: filter .4s ease可实现平滑黑白转彩色，须显式声明transition、禁用none、统一单位、避免transform共存，并注意svg及旧版浏览器兼容性。
直接给结论：用 filter: grayscale(0) 到 filter: grayscale(1) 配合 transition 可以实现黑白到彩色的平滑过渡，但必须注意浏览器默认不触发重绘、伪类选择器写法错误、以及 SVG 图片的兼容性陷阱。
为什么 hover 时图片没过渡效果？
最常见的原因是没给元素显式声明 transition，或者只写了 transition: all .3s 却忽略了 filter 的可动画性限制。
-
filter属性本身支持 CSS 过渡，但必须指定具体属性名，transition: all在部分旧版 Safari 中不可靠 - 务必写成
transition: filter .3s ease，而不是依赖all - 初始状态和目标状态都得是合法的
filter值，比如不能从none过渡到grayscale(1)（none不是标准值，应改用grayscale(0)） - 如果图片是背景图（
background-image），filter对其无效 —— 必须作用在<img>或带内容的容器上
如何正确写 hover 黑白 → 彩色切换？
核心是「默认灰度 + hover 清除灰度」，而非反向操作。因为 grayscale(0) 是彩色态，更稳定。
img {
filter: grayscale(1);
transition: filter .4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
img:hover {
filter: grayscale(0);
}
- 使用
cubic-bezier曲线能让过渡更自然（比ease更有弹性） - 避免用
!important强制覆盖，容易和框架样式冲突 - 若同时要加 blur 或 brightness，统一写在一条
filter声明里：filter: grayscale(1) blur(1px)，不要拆成多条
SVG 图片或 inline SVG 怎么办？
filter: grayscale() 对外部引用的 SVG（<img src="x.svg">）有效，但对 inline SVG 内部的 <image></image> 或 <use></use> 元素无效 —— 因为它们被包裹在 SVG 渲染上下文中。
- 对 inline SVG 整体加灰度：给外层
<svg></svg>标签加filter - 若需精确控制 SVG 内部位图，得用
<fecolormatrix></fecolormatrix>滤镜定义，再通过filter引用，且必须配合transition在 CSS 中切换url(#id)和none - Chrome 115+ 支持
filter在<image></image>上直接过渡，但 Firefox 目前仍不支持 —— 生产环境建议降级为 JS 控制 class 切换
真正麻烦的是混合了 will-change、GPU 加速和高 DPR 屏幕的场景：filter 过渡在某些安卓 WebView 中会闪帧，这时候得加 transform: translateZ(0) 触发硬件加速，但又可能引发文字锯齿 —— 这些细节没法靠一套规则覆盖，得实机测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
