在css中利用变量动态控制动画延迟时长，核心做法是在 @keyframes 或关键帧选择器中使用 calc() 结合自定义属性（如 --delay）来计算时间值。通过修改父级或元素上的 --delay 变量，即可在不重写动画定义的情况下，实时调整动画的启动时机。这种方法特别适用于需要批量错开动画效果的场景，例如列表项依次入场。
如何在HTML结构中设置并传递延迟变量？
要在HTML中设置并传递延迟变量，最直接的方式是在元素的 style 属性中内联定义 --delay，或者在父容器上定义并通过CSS继承或子选择器引用。关键在于确保动画所在的元素能够读取到该变量的值，并在 animation-delay 属性中正确调用它。通常，我们会为每个子元素分配不同的变量值，从而实现交错效果。
<div class="container"> <div class="item" style="--delay: 0s;">Item 1</div> <div class="item" style="--delay: 0.2s;">Item 2</div> <div class="item" style="--delay: 0.4s;">Item 3</div> </div>
上述代码展示了三个 .item 元素，分别设置了 --delay 为 0s、0.2s 和 0.4s。配合CSS中的 animation-delay: var(--delay)，每个项目将按设定的时间依次启动动画。
如何在CSS中引用变量实现动态延迟？
在CSS中引用变量实现动态延迟，需要在 animation-delay 属性中使用 var(--delay)。如果需要根据其他属性（如索引）动态计算延迟，可以结合 nth-child 和 calc()，但更灵活的方式是直接通过内联样式或JavaScript设置 --delay 变量。这样，CSS只需负责读取和应用该变量，无需硬编码具体时间。
.item {
animation: fadeIn 1s ease-out forwards;
animation-delay: var(--delay, 0s);
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
这段CSS定义了 .item 类的动画行为，其中 animation-delay 使用 var(--delay, 0s)，表示如果未设置 --delay，则默认延迟为 0s。结合前文的HTML结构，每个项目将根据其 --delay 值动态调整动画启动时间。
当变量值为空或未定义时，动画延迟如何处理？
当 --delay 变量为空或未定义时，CSS会使用 var() 函数的第二个参数作为回退值。在示例代码中，var(--delay, 0s) 表示如果 --delay 未设置，则延迟时间为 0s。这意味着动画会立即启动，不会有任何延迟。这种行为确保了即使变量缺失，动画仍能正常执行，只是失去了动态控制的效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
