我正在使用CSS关键帧动画两个单独的文本。

我面临的问题是，在100%动画完成时第一个span元素（“first text”）的文本突然出现，而不是在“first text”完成后第二个span元素的文本翻转。

null

.c--anim-btn {
  height: 40px;
  font: normal normal 700 1em/4em Arial, sans-serif;
  overflow: hidden;
  width: 200px;
  background-color: #ffffff;
}
.c--anim-btn span {
  color: black;
  text-decoration: none;
  text-align: center;
  display: block;
}
.c-anim-btn {
  animation: rotateWord 3s linear infinite 0s;
}
.c--anim-btn span:nth-child(2) {
  -webkit-animation-delay: 1.5s;
  -ms-animation-delay: 1.5s;
  animation-delay: 1.5s;
}
@keyframes rotateWord {
  0% {
    margin-bottom: 0rem;
  }
  25% {
    margin-top: 0rem;
  }
  40% {
    margin-top: -4rem;
  }
  100% {
    margin-top: -4rem;
  }
}

<div class="c--anim-btn">
  <span class="c-anim-btn">First Text</span>
  <span>Second Text</span>
</div>

null