hover时filter: grayscale(0)无动画，根本原因是过渡链断裂：必须同时满足三条件——初始态filter: grayscale(1)、默认状态声明transition: filter 0.3s ease、悬停态filter: grayscale(0)，且禁用none、避免单位混用、覆盖及背景图误用。
直接用 filter: grayscale(1) + transition: filter 就能实现黑白照片悬停着色动效，但多数人卡在动画不触发、闪屏或 Safari 卡顿上。
为什么 hover 时 filter: grayscale(0) 没动画？
根本不是浏览器不支持，而是过渡链断了：
-
filter: none→filter: grayscale(1)不会插值：none 不是数值，浏览器无法计算中间帧 - 单位混用，比如
grayscale(100%)和grayscale(0)并存，某些 Chrome 版本会当字符串处理，跳过过渡 -
transition写在:hover里，导致鼠标移入有动画、移出无动画（或反过来） - 样式被更高优先级规则覆盖，比如框架 CSS 或内联
style里的!important
正确写法必须三者同时存在：filter: grayscale(1)（初始态）、transition: filter 0.3s ease（声明在默认状态）、filter: grayscale(0)（悬停态）。
filter 过渡在 Safari 或 iOS 上卡顿/闪白帧怎么办？
这不是 bug，是旧版 WebKit 对 filter 的 GPU 合成策略不一致：
- 加
backface-visibility: hidden或transform: translateZ(0)强制启用硬件加速 - 慎用
will-change: filter：只在:hover里声明，避免长期占用 GPU 内存 - 图片尺寸必须固定：用
width/height或aspect-ratio，别依赖object-fit: cover动态缩放，否则触发 layout shift - iOS 12–14 曾有 grayscale 缓存未命中问题，加
transform: scale(1)可缓解
多个滤镜组合时容易踩的坑
想同时调亮度、对比度和灰度？顺序和完整性决定是否跳变：
- 初始和悬停状态都得写全，比如不能默认只写
grayscale(1)，hover 时却只写grayscale(0)—— 其他滤镜（如brightness）会被重置为默认值 - 推荐写法：
filter: grayscale(1) brightness(0.9) contrast(0.95)→filter: grayscale(0) brightness(1) contrast(1) - 避免在同一个元素上同时做
transform和filter过渡却不声明will-change: transform, filter，尤其在滚动容器里易触发渲染异常 -
filter对背景图（background-image）无效，必须作用在<img>或含内容的容器上
真正难的不是写对那两行 CSS，而是当它在某台 Android 设备上闪一下、在某个 Safari 版本里硬切、或者和深色模式交互出反向灰度时，你得知道该去查哪一层渲染策略。这些细节不会报错，但会让效果失效于无声处。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
