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

Question

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

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

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

Answer 2

我已经改变了一些你的关键帧，可能这就是你想要的

＆＃13;

＆＃13;

.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%, 25% {
		 margin-top: 0rem;
	}
	40%, 75% {
		 margin-top: -4rem;
	}
	100% {
		margin-top: 0rem; 
	}
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;