@keyframes 中禁止使用 CSS 变量（如 var(--delay)），因其静态解析阶段无法读取运行时变量，会导致整个关键帧被忽略；动画延迟必须通过元素的 animation-delay 或 JS 动态设置 style.animation 实现。
不能在 @keyframes 中动态注入随机延迟变量——浏览器会直接忽略整个关键帧，动画根本不会注册。
为什么 @keyframes 里不能用 var(--delay)
这不是兼容性问题，是所有现代浏览器（Chrome、Firefox、Safari、Edge）统一执行的 CSS 规范行为：自定义属性（CSS 变量）禁止在 @keyframes 块内被读取或计算。哪怕只写一行 transform: translateX(calc(var(--dist) * 100px));，整个 @keyframes slide 都会被丢弃。
-
@keyframes是静态解析阶段处理的，变量值在运行时才确定，二者生命周期不匹配 - 延迟控制逻辑必须移出关键帧，落到元素自身的动画控制属性上
- 试图用
animation-delay: calc(var(--base) + var(--offset))写在@keyframes里？无效，且导致动画消失
animation-delay 和 animation-duration 才真正支持变量
这两个属性位于元素渲染时的样式计算链末端，能实时响应 var() 变化并触发重绘（非重排）。但前提是变量必须可访问：
- 变量需定义在
:root或父容器上，确保子元素能继承或通过作用域获取 - CSS 中写法必须是：
animation-delay: var(--delay, 0.2s);，不能嵌套在@keyframes内 - 若想每个元素延迟不同，可用
data-index配合 JS 注入：el.style.setProperty('--delay', i * 0.15 + 's');
真要随机延迟？JS 动态设 style.animation 是唯一可靠路径
纯 CSS 无法生成随机数，animation-delay 的“随机”只能靠 JS 在运行时拼接字符串实现：
立即学习“前端免费学习笔记（深入）”；
- 不要改
@keyframes名称或内容，保持它干净固定（如@keyframes fade-in） - 用
Math.random()生成范围值，例如：const dur = (1 + Math.random() * 1.5).toFixed(2); - 最终赋值必须走
el.style.animation：el.style.animation = `fade-in ${dur}s ${delay}s ease-out`; - 注意：多次调用需先清空再设，否则旧动画可能残留；可加
el.style.animation = '';重置
最易被忽略的一点：仅修改 CSS 变量（如 setProperty('--delay', '0.7s')）不会重启动画——必须触发重绘，比如切换 class、读取 offsetHeight，或显式设置 animation-play-state: paused/running。
