用 CSS 实现图片“先模糊再清晰”效果的核心是通过 @keyframes 动画使 filter: blur() 值从大到小递减，如从 10px 到 0，并使用 forwards 保持最终状态，配合 ease-out 实现自然对焦感。

用 CSS 实现图片“先模糊再清晰”的效果，核心是结合 filter: blur() 和 @keyframes 动画控制模糊值从大到小变化。

1. 基础动画：从模糊到清晰

关键在于让 blur() 的值随时间递减。初始设为较大值（如 10px），结束时为 0，浏览器会自动插值过渡。

• 确保图片本身有 filter 可动画属性（blur() 是 CSS 可动画属性之一）
• 动画需绑定在图片或其容器上，推荐直接作用于 元素
• 避免用 opacity 混淆——那是透明度，不是清晰度

2. 完整可运行代码示例

复制粘贴即可看到效果：

@@##@@

说明：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 值要动起来，且动得顺、停得准。