Animate.css动画延迟无效，如何实现页面加载后延迟显示元素？

问题分析 #

你遇到的--animate-delay不生效，是因为Animate.css默认样式未将--animate-delay变量自动绑定到animation-delay属性；同时自定义的文字轮播动画会从页面加载时就运行，需要和fadeIn动画同步才能实现“3秒后显示整个div”的预期效果。

解决方案 #

方法1：使用Animate.css内置延迟类（推荐） #

Animate.css提供了现成的延迟类（如animate__delay-3s），直接添加到元素上即可实现延迟，无需自定义变量：

修改后的HTML：

<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>

修改后的CSS：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

.text-slide {
  text-align: center;
}

.text-slide>div {
  display: inline-block;
  text-align: center;
  height: 40px;
  line-height: 40px;
  overflow: hidden;
  font-size: 30px;
}

.text span {
  display: block;
  padding: 0 10px;
}

.text {
  position: relative;
  animation: text-animation ease 8s infinite;
  /* 让文字轮播在fadeIn完成后开始，延迟=fadeIn延迟+fadeIn时长 */
  animation-delay: 5s;
}

@keyframes text-animation {
  0% { top: 0; }
  10% { top: 0; }
  20% { top: -40px; }
  30% { top: -40px; }
  40% { top: -80px; }
  50% { top: -80px; }
  60% { top: -120px; }
  70% { top: -120px; }
  80% { top: -160px; }
  90% { top: -160px; }
  100% { top: 0px; }
}

.animate__animated.animate__fadeIn {
  --animate-duration: 2s;
}

方法2：手动绑定自定义延迟变量 #

如果坚持使用自定义--animate-delay变量，需要手动将其赋值给animation-delay属性：

修改后的CSS关键部分：

.animate__animated.animate__fadeIn {
  --animate-duration: 2s;
  --animate-delay: 3s;
  animation-delay: var(--animate-delay); /* 手动绑定变量到动画延迟属性 */
}

.text {
  position: relative;
  animation: text-animation ease 8s infinite;
  /* 用CSS变量计算同步延迟，避免硬编码 */
  animation-delay: calc(var(--animate-delay) + var(--animate-duration));
}

HTML部分保持你原代码即可。

效果说明 #

• 页面加载后，.text-slide元素先隐藏3秒，随后开始2秒的fadeIn淡入动画。
• 文字轮播动画会在淡入完成后（加载后5秒）开始循环播放，确保用户看到完整的动画效果。

内容的提问来源于stack exchange，提问作者user23278485