使用CSS的filter属性结合@keyframes或transition可实现图片滤镜平滑动画。1. 通过@keyframes定义关键帧，如从grayscale(100%)到0%并调整亮度，实现2秒过渡；2. 利用:hover配合transition，悬停时触发滤镜变化，无需JavaScript；3. 使用infinite循环动画创建呼吸效果，如blur与opacity交替变化；4. 注意性能优化，避免过多复杂滤镜，可启用硬件加速提升流畅度，主流浏览器均支持但IE不兼容。核心是将filter作为整体属性进行动画处理，浏览器自动插值完成过渡。
想让图片的滤镜效果平滑变化，比如从黑白到彩色、亮度调整或饱和度过渡，可以使用 CSS 的 filter 属性配合 @keyframes 和 animation 实现流畅动画。关键在于将 filter 作为一个整体属性进行过渡，因为目前不能对 filter 内的单个函数（如 contrast 或 blur）单独做动画，但可以通过 keyframes 定义多个状态来实现视觉上的平滑变化。
1. 基础语法：filter 与 @keyframes 结合
定义一个关键帧动画，改变图片的 filter 值。例如实现“从灰度到彩色 + 提升亮度”的效果：
@keyframes changeFilter {
0% {
filter: grayscale(100%) brightness(0.8);
}
100% {
filter: grayscale(0%) brightness(1);
}
}
img {
animation: changeFilter 2s ease-in-out;
}
这样图片会在 2 秒内从完全灰度、稍暗的状态，过渡到全彩且正常亮度。
2. 添加悬停交互（hover 触发动画）
更常见的用法是用户悬停时触发动画。无需 JavaScript，纯 CSS 即可：
立即学习“前端免费学习笔记（深入）”；
img {
filter: grayscale(100%);
transition: filter 0.6s ease;
}
img:hover {
filter: grayscale(0%) brightness(1.1) saturate(1.2);
}
这里用了 transition 而不是 animation，也能实现平滑过渡。虽然 filter 是复合属性，但现代浏览器支持对它做渐变动画。
3. 使用 @keyframes 制作循环动画
如果希望动画自动反复播放，比如呼吸式模糊效果：
@keyframes pulseBlur {
0%, 100% {
filter: blur(0px) opacity(0.8);
}
50% {
filter: blur(2px) opacity(1);
}
}
img {
animation: pulseBlur 3s infinite alternate;
}
这张图片会周期性地轻微模糊又恢复清晰，适合背景图或装饰性图像。
4. 注意事项与兼容性
- 性能优化：blur、drop-shadow 等滤镜较耗性能，避免在大量元素上同时使用复杂动画。
-
硬件加速：可通过
transform: translateZ(0)或will-change: filter提升动画流畅度。 - 浏览器支持：主流浏览器均支持 filter 动画，但旧版 IE 不支持，需根据项目需求考虑降级。
基本上就这些。无论是 hover 过渡还是 keyframes 循环，核心都是把 filter 当作可动画属性来处理。只要定义好起止状态，浏览器会自动插值完成中间帧。
