css animation 不支持运行时随机值，所谓“random 负延迟”是误解；animation-delay 必须预设，无法用 math.random() 动态计算；差异化需靠 :nth-child() 枚举或构建工具生成；固定定位+top:-10px 控制起始点；贝塞尔曲线模拟自然摇摆。
animation 本身不支持运行时随机值，所谓“random 负延迟”是常见误解——animation-delay 只能写死在 CSS 里，浏览器不会在每次渲染或元素挂载时重新计算。真要实现每片雪花的起始时间、速度、偏移都不同，必须靠预设差异化规则，而不是指望 CSS 自动随机。
为什么不能用 Math.random() 直接写进 CSS？
CSS 是声明式静态规则，不执行 JS 表达式。animation-delay: calc(-1s * Math.random()) 这类写法完全无效，浏览器直接忽略整条声明。所有“随机感”都得靠人工枚举或构建工具提前生成差异项。
:nth-child() 是最轻量的差异化控制手段
不用 JS 也能让每片雪花表现不同，关键靠选择器批量打散参数：
-
.snow:nth-child(3n)设animation-duration: 12s，下落慢 -
.snow:nth-child(3n+1)设animation-delay: -4.2s（负延迟=提前入场） -
.snow:nth-child(3n+2)设transform: translateX(12vw)，起始横坐标右偏 - 配合
opacity和scale()的阶梯变化，层次立刻拉开
position: fixed + top: -10px 是起始点控制核心
雪花必须从视口顶部外“出生”，否则会闪一下才开始动：
- 绝对定位（
position: absolute）易受父容器影响，滚动时错位 - 固定定位（
position: fixed）脱离文档流，始终相对于 viewport -
top: -10px确保初始位置在屏幕上方，动画一触发就向下走 - 别用
top: 0—— 那是贴边出现，缺乏“飘入”感
贝塞尔曲线摇摆比线性位移更自然
纯 translateY() 是直线下坠，像雨滴；真实雪花要带风偏：
- 用
@keyframes同时定义translateY和translateX -
translateX的关键帧走cubic-bezier(0.2, 0.8, 0.4, 1)，模拟左右晃动 - 避免用
steps()或ease-in-out—— 它们节奏太规整，一眼假 - 每片雪花的
animation-timing-function最好也微调，比如cubic-bezier(0.1, 0.9, 0.3, 1.1)
负延迟不是魔法，是把动画周期切片后人为错开起点。真正难的是让几十个 .snow 元素在 DOM 里排布合理、CSS 选择器不爆炸、动画不卡顿——这些细节比“怎么随机”更决定最终效果是否可信。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
