animation 与 filter 可结合实现动态视觉效果。filter 支持模糊、亮度、对比度等图像处理，通过 @keyframes 可定义其动画关键帧，如实现图片由模糊变清晰并增亮。常用于悬停、加载和交互反馈场景，例如卡片悬停时增强对比度和投影。性能方面需注意避免大面积高值模糊，可使用 will-change 提升渲染效率，并关注浏览器兼容性，尤其 Safari 对复杂滤镜支持有限。优先考虑 transform 或 opacity 替代以优化性能。
在CSS中，animation 与 filter 可以结合使用，实现丰富的视觉动画效果。filter 属性本身支持多种图像处理效果，如模糊、亮度调整、对比度、色相旋转等，而通过 animation，可以让这些滤镜效果随时间动态变化，从而创建平滑的过渡动画。
1. filter 滤镜基础
filter 属性用于对元素进行图形处理，常见值包括：
- blur(5px) —— 高斯模糊
- brightness(50%) —— 调整亮度
- contrast(200%) —— 对比度
- hue-rotate(90deg) —— 色相旋转
- grayscale(100%) —— 灰度化
- drop-shadow(2px 2px 4px black) —— 投影（类似box-shadow但支持模糊）
多个滤镜可以组合使用，用空格分隔：
filter: blur(2px) brightness(1.2) hue-rotate(45deg);2. 使用 animation 控制 filter 动画
要让 filter 发生动画，需结合 @keyframes 定义关键帧，并应用到元素上。
立即学习“前端免费学习笔记（深入）”；
例如：实现一个图片从模糊到清晰、同时变亮的动画：
@keyframes fadeInSharp {from {
filter: blur(8px) brightness(0.6);
}
to {
filter: blur(0) brightness(1);
}
}
img {
animation: fadeInSharp 2s ease-in-out;
}
这段代码会让图片在2秒内逐渐去除模糊并提升亮度，常用于加载或悬停效果。
3. 常见应用场景
filter 动画非常适合以下场景：
- 悬停效果：鼠标移入时增强图片色彩或加阴影
- 加载动画：内容加载过程中先模糊显示，再清晰化
- 交互反馈：按钮点击时短暂变灰或变暗
示例：悬停时增加对比度和投影
.card {filter: contrast(100%);
transition: filter 0.4s;
}
.card:hover {
filter: contrast(130%) drop-shadow(0 4px 8px rgba(0,0,0,0.2));
}
虽然这里用了 transition，但 animation 更适合复杂或循环的滤镜变化。
4. 性能与兼容性提示
filter 动画可能影响渲染性能，尤其是 blur 和 drop-shadow 会触发重绘甚至合成层提升。
优化建议：
- 避免在大面积元素上频繁使用高值模糊
- 对动画元素添加 will-change: filter 可提升性能（谨慎使用）
- 注意老版本浏览器兼容性，特别是 Safari 对某些 filter 组合支持较弱
- 可考虑用 transform 或 opacity 替代部分效果以获得更好性能
基本上就这些。animation 与 filter 结合灵活且表现力强，只要注意性能控制，就能做出既美观又流畅的动画效果。
