transition 与 filter 结合可实现平滑视觉动画，如图片悬停变灰、模糊或亮度变化，通过 transition 定义滤镜过渡时长与缓动，配合 grayscale、blur、brightness 等属性提升交互体验，常用于图片悬停效果，建议优化性能并注意浏览器兼容性。
在CSS中，transition 与 filter 滤镜结合使用，可以实现非常平滑且视觉效果丰富的动画效果，比如图片悬停时变灰、变亮、模糊或旋转等。这种组合无需JavaScript，仅用几行CSS就能提升用户体验。
filter 常见属性简要说明
filter 可以为元素添加图形效果，常用于图片、背景或其它视觉元素：
- brightness()：调整亮度
- contrast()：对比度
- grayscale()：灰度
- blur()：高斯模糊
- hue-rotate()：色相旋转
- scale() 或 transform 配合使用可实现缩放
transition 控制 filter 动画过渡
直接改变 filter 属性会瞬间生效，加上 transition 才能实现渐变动画。transition 定义了属性变化的时长、缓动方式和延迟。
基本语法：
立即学习“前端免费学习笔记（深入）”；
img {
filter: brightness(1);
transition: filter 0.4s ease;
}
img:hover {
filter: brightness(1.5);
}
当鼠标悬停时，亮度从1平滑过渡到1.5，持续0.4秒，使用 ease 缓动函数。
常见实用示例
以下是一些常见的结合 transition 和 filter 的效果：
1. 图片悬停去色 → 彩色
img {
filter: grayscale(100%);
transition: filter 0.5s;
}
img:hover {
filter: grayscale(0);
}
2. 模糊效果（常用于背景预览）
.card {
filter: blur(0);
transition: filter 0.3s;
}
.card:hover {
filter: blur(2px);
}
3. 多个滤镜组合动画
img {
filter: brightness(1) contrast(1);
transition: filter 0.4s;
}
img:hover {
filter: brightness(1.2) contrast(1.1) saturate(1.5);
}
注意：多个 filter 函数写在同一个 filter 属性中，transition 仍只需监听 filter 即可触发整体过渡。
注意事项与性能建议
虽然 transition + filter 效果出色，但需注意以下几点：
- 过度使用 blur 或复杂滤镜可能影响页面性能，尤其在移动设备上
- 建议对需要频繁动画的元素添加 will-change: filter 以优化渲染
- 某些旧版浏览器对 filter 支持有限，需测试兼容性（如IE完全不支持）
- filter 不会影响布局，只作用于渲染层，适合做视觉增强
基本上就这些。合理使用 transition 与 filter 结合，能让网页交互更生动自然，又不至于过于花哨。关键在于控制动画节奏和选择合适的触发场景。
