纯 css 雨滴动画需用 transform: translatey() 与 opacity 组合，配合 linear 时序、随机 animation-delay 和 1 次循环，伪元素实现高性能；移动端需防 safari 动画暂停。
怎么用纯 CSS 实现雨滴下落动画
纯 CSS 就能做出逼真雨滴下落效果，关键不是堆叠动画，而是控制 transform: translateY() + opacity 的组合节奏，配合随机延迟和持续时间，避免所有雨滴同步掉下来——那看起来像瀑布，不是雨。
核心思路：用伪元素或空 <div> 模拟雨滴，批量生成时用 CSS 变量或 JS 控制差异化参数；动画本身必须是 <code>linear（匀速），因为真实雨滴在空气中很快达到终末速度，加速度几乎为零。
- 每个雨滴元素设
position: absolute，父容器overflow: hidden防止溢出 - 动画时长建议
0.5s ~ 1.2s，太慢显拖沓，太快像霰弹 - 用
@keyframes rain-fall定义从顶部外（transform: translateY(-20px)）到穿出底部（transform: translateY(100vh)）的过程 - 透明度变化要轻微：起始
opacity: 0.6→ 中段0.8→ 结束前0.4，模拟水珠反光和视觉暂留
为什么用 ::before 而不是真实 DOM 元素
大量雨滴（比如 50+）如果全用真实标签，会显著增加重排压力，尤其在移动端。而伪元素不参与文档流、不触发 layout，GPU 加速更稳定。
但注意：伪元素无法绑定事件，也不能用 JS 动态改内容；如果后续要加点击反馈（比如雨滴炸开），就得切回真实 <span class="raindrop"></span> + JS 批量 append。
- 伪元素方案适合背景装饰型雨效，性能优先
- 每个
.rain容器配一个::before，用--delay和--durationCSS 变量控制个体差异 - 别在伪元素里用
content: "•"—— 字符渲染有字体依赖，改用border-radius: 50%+background更可控
animation-timing-function: linear 不能换成 cubic-bezier
有人试过用 cubic-bezier(0.2, 0.8, 0.4, 1) 模拟加速下落，结果雨滴看起来像被往下拽，失真。真实雨滴在 1–2 米内就达终端速度，视觉上就是匀速线性运动。
更隐蔽的问题是：如果用了非 linear 曲线，不同高度的雨滴即使设相同 animation-duration，实际落地时间也会错位，导致“断雨”或“叠雨”现象（某时刻突然密集，下一刻又真空）。
- 坚持用
linear，靠调整animation-delay的随机分布来制造自然感 - 延迟范围建议
-2s ~ 3s，确保动画始终有新滴进入视区 - 别用
infinite无限循环——它会让雨滴在顶部反复闪现，应设animation-iteration-count: 1，靠 JS 或大量实例自动续上
移动端 Safari 上雨滴突然卡住或消失
这是 iOS 15+ 的常见表现：当页面滚动或 tab 切换后，CSS 动画可能被 Safari 暂停且不恢复。根本原因不是代码写错，而是 WebKit 对不可见区域动画的节能策略过于激进。
绕过方式不是加 will-change: transform（无效），而是用极轻量的 JS “唤醒”动画队列：
document.addEventListener('visibilitychange', () => {
if (!document.hidden) {
document.body.style.animation = 'none';
setTimeout(() => {
document.body.style.animation = '';
}, 10);
}
});
或者更稳妥的做法：把雨滴容器设为 position: fixed，并监听 scroll 事件微调 top 值，让其始终处于 viewport 内——虽然多几行 JS，但比调试 Safari 渲染 bug 省两小时。
真正难的不是写出第一滴雨，而是让 100 滴在各种设备上都保持匀速、不闪烁、不堆积。多数人卡在“看起来像雨”，其实差的是对物理节奏和浏览器渲染机制的双重校准。
