CSS图片滤镜渐变与动画实现技巧

想让图片的CSS滤镜实现平滑渐变过渡，比如从模糊到清晰、黑白到彩色或亮度变化，可以通过 @keyframes 配合 filter 属性来实现。虽然 filter 本身不支持直接渐变，但结合动画可以做到视觉上的平滑过渡。

1. 使用 @keyframes 定义滤镜动画

通过 keyframes 设置不同阶段的 filter 值，浏览器会自动插值实现过渡效果。

例如：实现图片从模糊黑白到清晰彩色的过渡：

@keyframes fadeInSharp {
  0% {
    filter: blur(5px) grayscale(100%) brightness(0.5);
  }
  100% {
    filter: blur(0) grayscale(0) brightness(1);
  }
}

img {
  animation: fadeInSharp 2s ease-in-out forwards;
}

这段代码会让图片在2秒内逐渐变得清晰、彩色并恢复正常亮度。

2. 控制过渡的平滑性

使用 ease-in-out 或自定义贝塞尔曲线（如 cubic-bezier(0.4, 0, 0.2, 1)）可以让过渡更自然。

关键点：

• 避免使用 step() 类缓动函数，会导致跳跃式变化
• 推荐用 ease、ease-in-out 或 linear 实现流畅感
• 添加 forwards 保持动画结束后的最终状态

3. 按需触发滤镜动画

你可以通过 hover、JavaScript 添加/移除类名等方式控制动画播放。

示例：鼠标悬停时启动滤镜变化

img {
  filter: contrast(75%) saturate(50%);
  transition: filter 0.3s ease;
}

img:hover {
  filter: contrast(100%) saturate(100%);
}

注意：这里用了 transition 而非 animation，适合简单交互场景。复杂多阶段变化仍推荐使用 @keyframes。

4. 可动画的 filter 函数列表

CSS 中以下 filter 函数支持平滑过渡：

• blur(px)
• brightness(%)
• contrast(%)
• grayscale(%)
• hue-rotate(deg)
• opacity(%)
• saturate(%)
• sepia(%)

组合使用时，确保起始和结束的 filter 函数顺序与数量一致，避免插值异常。

基本上就这些。只要结构清晰、函数匹配、缓动合理，就能做出很自然的滤镜渐变效果。