本文详解如何正确使用 Animate.css 的延迟类（如 animate__delay-3s）实现元素入场延时，纠正直接设置 CSS 自定义属性 --animate-delay 无效的常见误区，并提供可立即运行的完整示例。
本文详解如何正确使用 animate.css 的延迟类（如 `animate__delay-3s`）实现元素入场延时，纠正直接设置 css 自定义属性 `--animate-delay` 无效的常见误区，并提供可立即运行的完整示例。
在 Animate.css（v4+）中，延迟动画不能通过直接修改 --animate-delay 自定义属性生效——该变量仅作为底层计算基数，真正触发延迟行为的是预设的延迟工具类（utility classes），例如 animate__delay-3s、animate__delay-5s 等。这些类内部通过 animation-delay 属性控制延时，与 --animate-duration 配合使用，但不可混用自定义值覆盖。
✅ 正确做法：使用内置延迟类
只需在元素上添加对应延迟类即可。例如，要让 .text-slide 在页面加载后 3 秒再开始淡入动画，应写为：
<div class="text-slide animate__animated animate__fadeIn animate__delay-3s">
<div class="text-wrap">
<div class="text font-semibold">
<span>Warsaw</span>
<span>Dubai</span>
<span>Bogota</span>
<span>New York</span>
<span>Cape Town</span>
</div>
</div>
</div>同时，确保已引入 Animate.css（推荐 CDN）：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
animate__delay-3s表示固定延迟 3 秒，与--animate-duration无关；若手动设置--animate-delay: 0.5s，再应用animate__delay-3s，实际延迟将变为0.5s × 3 = 1.5s—— 这会破坏语义一致性，官方不推荐。- 延迟类必须与
animate__animated及具体动画类（如animate__fadeIn）共存于同一元素，缺一不可。- 若需自定义延迟值（如 2.7s），Animate.css v4 不提供对应类，建议改用原生 CSS
animation-delay或封装自己的类。
? 补充：兼容性与调试建议
- 所有
animate__delay-*类均基于animation-delay实现，兼容所有支持 CSS 动画的现代浏览器。 - 若延迟未生效，请检查：
- 是否遗漏
animate__animated基础类； - 是否误将延迟类加在父容器而动画类加在子元素（必须作用于同一节点）；
- 浏览器开发者工具中审查元素，确认
animation-delay是否被正确计算并应用（通常显示为3s）。
- 是否遗漏
通过规范使用 Animate.css 提供的工具类，你可以精准、可维护地控制动画启动时机，无需额外 JavaScript，兼顾性能与开发效率。
