使用CSS transition与filter结合可实现模糊动画效果。首先通过filter: blur()设置模糊状态，再用transition定义过渡时间与缓动函数，使模糊变化平滑进行；常见应用包括图片悬停去模糊和页面加载时的模糊渐显；通过:hover伪类触发悬停效果，或用JavaScript动态添加类实现进入动画；为提升性能，建议避免大面积或多元素同时动画，合理控制模糊半径，并利用will-change或translateZ将元素提升为合成层以优化渲染。
使用CSS过渡（transition）与
filter属性结合，可以轻松实现模糊动画效果，比如图片加载时从模糊到清晰、悬停时高斯模糊渐变等。这种效果不仅视觉上平滑自然，而且实现起来非常简单。
1. 基本语法与原理
filter 属性用于对元素应用图形效果，如模糊、亮度调整、对比度等。其中
blur()函数可实现高斯模糊。配合 transition，可以让模糊值的变化具有时间过渡效果。 关键点：
filter: blur(5px)
表示应用5像素的模糊半径transition: filter 0.4s ease
让模糊变化持续0.4秒，并使用缓动函数
2. 图片悬停模糊淡出效果
常见于图库或卡片设计中，鼠标移上时图片由模糊变为清晰。
HTML 示例：<div class="blur-image"> <img src="example.jpg" alt="示例图片"> </div>CSS 实现：
.blur-image img {
filter: blur(8px);
transition: filter 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.blur-image img:hover {
filter: blur(0);
}
说明：初始状态图片是模糊的，当鼠标悬停时，
filter值从
blur(8px)平滑过渡到
blur(0)，实现“去模糊”动画。
立即学习“前端免费学习笔记（深入）”；
3. 进入页面时模糊渐显
适用于内容加载或滚动进入视口时的动画，提升用户体验。
CSS 示例：
.fade-in-blur {
opacity: 0;
filter: blur(10px);
transition: all 1s ease-out;
}
.fade-in-blur.loaded {
opacity: 1;
filter: blur(0);
}
通过JavaScript在适当时机添加
loaded类：
document.querySelector('.fade-in-blur').classList.add('loaded');
这样元素会从完全模糊且透明的状态，渐变为清晰可见，营造柔和出现的效果。
4. 性能优化建议
虽然
filter动画视觉效果好，但处理不当可能影响性能，尤其是大图或多元素同时动画。 建议：
- 避免在低性能设备上对多个大图同时使用模糊动画
- 可考虑将需要模糊的元素提升为合成层：
transform: translateZ(0)
或will-change: filter
- 控制模糊半径不要过大（一般不超过10px），以免重绘开销过高
基本上就这些。只要掌握
filter: blur()和
transition的配合，就能快速做出流畅的模糊动画，不复杂但容易忽略细节。合理使用，能让界面更具动感和专业感。
