烟雾粒子消失动画需用opacity、transform和filter: blur()组合实现视觉衰减，而非单纯淡出；关键帧须涵盖透明度、位移、缩放、模糊四维度，配合随机化参数与性能优化。
烟雾粒子消失动画的核心是渐变透明 + 位移模糊
纯 CSS 实现“烟雾感”消失，关键不是模拟物理烟雾，而是用 opacity、transform 和 filter: blur() 的组合制造视觉衰减。浏览器不支持粒子系统，所以得用多个小元素（如 <span> 或伪元素）批量控制，每个粒子走独立但相似的动画路径。
常见错误是只调 opacity: 0——这只会“淡出”，没有上升/扩散/失焦的烟雾错觉。必须叠加 translateY(-100px) 模拟上升、scale(1.2) 模拟扩散、blur(2px) 模拟边缘消散。
- 每个粒子动画时长建议设为
1.2s–2s，带ease-out或cubic-bezier(0.2, 0.8, 0.3, 1)，避免线性导致机械感 - 起始
opacity设为0.9而非1，留出衰减余量 -
filter: blur()值不宜超过3px，否则在低分辨率屏上糊成一团
用 @keyframes 定义单个粒子的烟雾消失轨迹
一个可靠的关键帧模板要覆盖四个变化维度：透明度、垂直位移、缩放、模糊。下面这段可以直接复用：
@keyframes smoke-out {
0% {
opacity: 0.9;
transform: translateY(0) scale(1);
filter: blur(0);
}
70% {
opacity: 0.4;
transform: translateY(-80px) scale(1.15);
filter: blur(1.5px);
}
100% {
opacity: 0;
transform: translateY(-120px) scale(1.3);
filter: blur(2.5px);
}
}注意：不要把 100% 的 opacity 设为 0.01 试图“更柔和”——CSS 渲染器对极小 opacity 值处理不稳定，反而可能残留像素点；直接到 0 更干净。
立即学习“前端免费学习笔记（深入）”；
- 位移值（如
-120px）需根据容器高度调整，避免粒子飞出视口后还占渲染资源 - 如果用
transform: translateZ()加纵深感，需确保父容器有transform-style: preserve-3d，否则无效 - 动画名别叫
fade或disappear，容易和其它项目冲突，推荐用语义明确的smoke-out
批量生成粒子并随机化参数防呆板
手写 20 个 <span class="particle"></span> 不现实，用 JavaScript 动态插入最省事。重点不是数量多，而是让每个粒子的动画延迟、持续时间、起始位置略有差异：
- 用
Math.random() * 0.5给animation-delay加0–0.5s随机偏移 - 持续时间在
1.4s到1.8s之间浮动，避免齐刷刷消失 - 水平起始位置用
left: calc(50% + (Math.random() - 0.5) * 100px)散开 - 粒子尺寸用
width/height: ${2 + Math.random() * 4}px，避免全是同样大小的“小圆点”
CSS 里不用为每个粒子写单独规则，统一用类选择器 + 自定义属性传参：
.particle {
position: absolute;
background: #aaa;
border-radius: 50%;
animation: smoke-out var(--duration, 1.6s) cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
animation-delay: var(--delay, 0s);
}移动端性能坑：blur() 和 transform 触发重绘太狠
在 iOS Safari 或低端 Android 上，同时跑多个带 filter: blur() 的动画极易掉帧。真正有效的降负载手段只有两个：
- 把粒子数严格控制在
15–25个以内——再多，用户也分辨不出“烟雾浓度”，只觉得卡 - 用
will-change: transform, opacity提前声明变化属性，但仅加在粒子元素上，别加在父容器 - 绝对不要用
background-image: radial-gradient()模拟烟雾——它无法动画，且每次 resize 都重绘
如果目标设备明确包含旧版安卓（如 Chrome 70 以下），直接去掉 filter: blur()，改用两层粒子：外层用半透明白色 + 大尺寸 + 快速 fade，内层用深灰 + 小尺寸 + 慢速 fade，靠层次差模拟模糊感。
粒子动画的“真实感”不来自参数精度，而来自节奏错落和视觉残留控制——这点比任何炫技的 CSS 函数都重要。
