Text Flip using CSS Keyframes

Question

I am using CSS keyframes to animate two separate text.

The problem which I am facing is that the text of first span element ("first text") on 100% animation completion appears suddenly instead of second span element text fliping after the completion of "first text".

.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

I have changed a little your keyframes, may be this is what you want

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

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

Answer 2

Try to change the css property to the following, in order to keep the final state of the animation:

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