css - 使用 CSS 关键帧进行文本翻转

Question

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

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

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

---

jsFiddle

Answer 1

尝试将 css 属性更改为以下内容，以保持动画的最终状态:

.c-anim-btn{
    animation: rotateWord 3s forwards;
    -webkit-animation: rotateWord 3.0s forwards
}