用 CSS 实现图片“先模糊再清晰”效果的核心是通过 @keyframes 动画使 filter: blur() 值从大到小递减，如从 10px 到 0，并使用 forwards 保持最终状态，配合 ease-out 实现自然对焦感。
用 CSS 实现图片“先模糊再清晰”的效果，核心是结合 filter: blur() 和 @keyframes 动画控制模糊值从大到小变化。
1. 基础动画：从模糊到清晰
关键在于让 blur() 的值随时间递减。初始设为较大值（如 10px），结束时为 0，浏览器会自动插值过渡。
- 确保图片本身有
filter可动画属性（blur()是 CSS 可动画属性之一） - 动画需绑定在图片或其容器上，推荐直接作用于
<img>元素 - 避免用
opacity混淆——那是透明度，不是清晰度
2. 完整可运行代码示例
复制粘贴即可看到效果：
<img src="photo.jpg" class="fade-in-sharp">
<style>
.fade-in-sharp {
filter: blur(10px);
animation: sharpen 2s ease-out forwards;
}
@keyframes sharpen {
to {
filter: blur(0);
}
}
</style>
说明：forwards 保证动画结束后保持 blur(0) 状态；ease-out 让“变清晰”过程后半段更自然。
立即学习“前端免费学习笔记（深入）”；
3. 进阶微调建议
想更真实？可以加点细节：
- 起始加轻微缩放或透明度（
transform: scale(0.98); opacity: 0.95;），模拟对焦前的轻微失稳 - 模糊值别用整数跳变，比如从
8px → 4px → 0分三段，比线性更像光学对焦 - 若图片加载慢，用
animation-delay: 0.3s错开入场时机，避免“闪一下再动”
4. 注意兼容性与性能
filter: blur() 在现代浏览器（Chrome 53+、Firefox 35+、Safari 9.1+、Edge 16+）均支持。但注意：
- 移动端 Safari 对高斯模糊较吃资源，
blur()值建议不超过6px - 避免在大量图片上同时运行动画，可加
will-change: filter;提示浏览器优化渲染 - 不用 JavaScript 控制时，确保图片已加载完成再触发动画（可用
img.onload或CSS :has() + loading="lazy"配合处理）
基本上就这些。不复杂但容易忽略细节——关键是 blur 值要动起来，且动得顺、停得准。
