使用 Animate css 制作动画时产生延迟

Question

我有一个使用 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>

我想要实现的就是整个 div 类

text-slide

网站加载后 3 秒出现在屏幕上。

动画里面有动画，一个是纯css做的，一个是animate.css做的。我想延迟这个用 animate.css 制作的。如何让它发挥作用？ 我尝试使用

--animate-delay: 5s;

但没有帮助。

Answer 1

您需要在 div 上添加

animate_delay-5s

，然后删除

--animate-delay: 5s;

。

看animate.css的

cdn

，

--animate-delay

只是通过自定义

animate__delay

类来使用。默认情况下

animate_delay-5s

表示延迟5秒，但如果将客户属性设置为

0.9s

，则

animate_delay-5s

实际上表示延迟0.9s * 5 = 4.5秒。我认为这不是一个好主意，因为类名不再与它的功能相匹配。

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