使用@keyframes和filter可实现图片滤镜平滑过渡，如从模糊黑白到清晰彩色；通过定义0%到100%关键帧，配合ease-in-out缓动和forwards保持状态，确保函数顺序一致，实现自然动画效果。
想让图片的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 函数顺序与数量一致，避免插值异常。
基本上就这些。只要结构清晰、函数匹配、缓动合理，就能做出很自然的滤镜渐变效果。
