hover 时 filter: grayscale() 无过渡效果是因为该属性非原生可动画，需显式声明 transition: filter；旧版浏览器兼容性差，推荐双图叠层+opacity 降级方案。
hover 时用 filter: grayscale() 切换为什么没过渡效果
因为 grayscale() 是一个滤镜函数，不是 CSS 原生可动画属性——浏览器默认不支持在 grayscale(0) 和 grayscale(1) 之间做平滑插值。直接写 transition: filter 0.3s 在部分旧版 Chrome 或 Safari 上会卡顿、跳变，甚至完全不生效。
- 必须显式声明
transition且指定filter（不能只写all） - IE 完全不支持
filter过渡，Edge 17+ 才开始稳定支持 - 某些安卓 WebView（如微信内置）对
filter动画支持极差，建议降级为 opacity + 两图叠层方案
正确写法：从黑白到彩色的平滑 hover 过渡
核心是固定两个状态 + 显式过渡声明。注意：grayscale() 参数范围是 0–1（或 0%–100%），别混用小数和百分比。
.img-grayscale {
filter: grayscale(1);
transition: filter 0.4s ease-in-out;
}
.img-grayscale:hover {
filter: grayscale(0);
}
- 用
ease-in-out比linear更自然，避免开头/结尾突兀 - 不要写成
transition: all 0.4s——这会拖慢渲染，且其他不可动画属性可能干扰 - 如果图片带
border-radius，filter可能导致边缘锯齿，加will-change: filter可缓解（但别滥用）
兼容性差时的 fallback 方案：双图叠层 + opacity
当目标环境明确包含老旧 WebView 或需要 100% 稳定时，放弃 filter，改用两张图（一张灰度 PNG，一张原色 PNG）叠加控制透明度。
<div class="img-overlay"> @@##@@ @@##@@ </div>
对应 CSS：
.img-overlay {
position: relative;
display: inline-block;
}
.img-overlay .color {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 0.3s;
}
.img-overlay:hover .color {
opacity: 1;
}
- 灰度图需提前用 PS / Figma 导出，不能依赖前端生成，否则首屏仍会闪现彩色
- 两图尺寸、定位必须完全一致，否则 hover 时会有错位感
- 体积增加一倍，适合关键 banner 图，慎用于列表项批量图片
性能敏感场景下要注意的细节
filter 动画会触发合成层提升，但频繁重绘仍可能掉帧，尤其在低端 Android 设备上。
- 避免在
:hover同时触发多个filter（比如再加blur()或brightness()），复合滤镜开销指数级上升 - 不要对
position: fixed或大尺寸滚动容器内的图片使用该效果，容易引发渲染抖动 - 如果页面有大量同类图片，用
transform: translateZ(0)强制 GPU 加速反而可能适得其反——现代浏览器已自动优化，手动干预常画蛇添足
真正难的不是写对那三行 CSS，而是判断当前项目里用户设备的渲染能力边界在哪。灰度转彩色只是表象，背后是权衡兼容性、体积、性能和开发成本的连续决策。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
