CSS滤镜平滑过渡技巧分享

想让图片的滤镜效果平滑变化，比如从黑白到彩色、亮度调整或饱和度过渡，可以使用 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 当作可动画属性来处理。只要定义好起止状态，浏览器会自动插值完成中间帧。