Making a delay in animation made using Animate css

I have an animation made using Animate 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;
}

@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;
  --animate-delay: 5s;
}

<div class="text-slide animate__animated animate__fadeIn">
  <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>

And what I want to achive that this whole div with class text-slide appears on the screen 3 seconds after the site is loaded.

There's an animation inside an animation, one made with pure css, and one with animate.css. I want to delay this made with animate.css. How to make it work? I tried using --animate-delay: 5s; but it didnt help.

Solution

You need to add animate__delay-5s on the div instead, and remove the --animate-delay: 5s;.

Looking at the cdn of animate.css, --animate-delay is only used by customizing animate__delay classes. By default animate_delay-5s means delaying 5 seconds, but if you set the custom property to 0.9s, animate_delay-5s actually means delaying 0.9s * 5 = 4.5 seconds. I don't think this is a good idea as the class name doesn't match what it does anymore.

* {
  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;
}

@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;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />

<div class="text-slide animate__animated animate__fadeIn animate__delay-5s">
  <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>