css - 动画文本持续时间

Question

但是我已经尝试了很多方法，我无法控制动画持续时间。基本上，我想将我的每个动画文本显示 2-3 秒。我的文字动画太快了。我该如何解决？注意:动画文本的位置并不重要。

.wrapper {
  position: absolute;
  top: 35%;
  left: -4%;
  padding: 2em 5em;
  color: #000;
  font-weight: 700;
  font-size: 150%;
}

.wrapper p {
  height: 60px;
  float: left;
  margin-right: 0.3em;
}

.wrapper b {
  float: left;
  overflow: hidden;
  position: relative;
  height: 30px;
  top: 5px;
}

.wrapper .animationText {
  display: inline-block;
  color: #ac1101;
  position: relative;
  white-space: nowrap;
  top: 0;
  left: 0;
  animation: move 7s;
  animation-iteration-count: infinite;
  animation-delay: 2s;
}

@keyframes move {
  0% {
    top: 0px;
  }
  20% {
    top: -50px;
  }
  40% {
    top: -100px;
  }
  60% {
    top: -150px;
  }
  80% {
    top: -200px;
  }
}

<div class="wrapper">
  <p>Some text here</p>
  <b>
    		<div class="animationText">
              anime text 1<br>
    		  anime text 2
    		</div>
        </b>
</div>

Answer 1

你可以试试这个:

.wrapper {
  position: absolute;
  top: 35%;
  left: -4%;
  padding: 2em 5em;
  color: #000;
  font-weight: 700;
  font-size: 150%;
}

.wrapper p {
  height: 60px;
  float: left;
  margin-right: 0.3em;
}

.wrapper .b {
  float: left;
  overflow: hidden;
  position: relative;
  height: 30px;
  top: 5px;
}

.wrapper .animationText {
  display: inline-block;
  color: #ac1101;
  position: relative;
  white-space: nowrap;
  top: 0;
  left: 0;
  animation: move 3s;
  animation-iteration-count: infinite;
  animation-delay: 2s;
}

@keyframes move {
  0%,30% {
    top: 0%;
  }
  60%,100% {
    top:-100%;
  }
}

<div class="wrapper">
  <p>Some text here</p>
  <div class="b">
    <div class="animationText">
      anime text 1<br> anime text 2
    </div>
  </div>
</div>