css keyframes rotate words vertically - html

Question

I want to rotate a word with css keyframes. After the second word appeard, there´s a blank and first after some seconds the first word is appearing again. The word should rotate vertical. this works. I only can´t make it work, that after the second word the first word is visible immediatly
my Code:
.rw-words{
display: inline;
text-indent: 10px;
}
.rw-words-1 span{
position: absolute;
opacity: 0;
overflow: hidden;
color: #e54517;
-webkit-animation: rotateWord 18s linear infinite 0s;
-ms-animation: rotateWord 18s linear infinite 0s;
animation: rotateWord 18s linear infinite 0s;
}
.rw-words-1 span:nth-child(2) {
-webkit-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
color: #e54517;
}
#-webkit-keyframes rotateWord {
0% { opacity: 0; }
2% { opacity: 0; -webkit-transform: translateY(-30px); }
5% { opacity: 1; -webkit-transform: translateY(0px);}
17% { opacity: 1; -webkit-transform: translateY(0px); }
20% { opacity: 0; -webkit-transform: translateY(30px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
#-ms-keyframes rotateWord {
0% { opacity: 0; }
2% { opacity: 0; -ms-transform: translateY(-30px); }
5% { opacity: 1; -ms-transform: translateY(0px);}
17% { opacity: 1; -ms-transform: translateY(0px); }
20% { opacity: 0; -ms-transform: translateY(30px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
#keyframes rotateWord {
0% { opacity: 0; }
2% { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); }
5% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px);}
17% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); }
20% { opacity: 0; -webkit-transform: translateY(30px); transform: translateY(90px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
<div class="rw-words rw-words-1">
<span>steuern.</span>
<span>erkennen.</span>
</div>
can´t see the mistake

Answer 1

Replace this:
.rw-words-1 span{
position: absolute;
opacity: 0;
overflow: hidden;
color: #e54517;
-webkit-animation: rotateWord 18s linear infinite 0s;
-ms-animation: rotateWord 18s linear infinite 0s;
animation: rotateWord 18s linear infinite 0s;
}
.rw-words-1 span:nth-child(2) {
-webkit-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
color: #e54517;
}
by this:
.rw-words-1 span {
position: absolute;
opacity: 0;
overflow: hidden;
color: #e54517;
-webkit-animation: rotateWord 6s linear infinite 0s;
-ms-animation: rotateWord 6s linear infinite 0s;
animation: rotateWord 6s linear infinite 0s;
}
.rw-words-1 span:nth-child(2) {
-webkit-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
color: #e54517;
}
Here is the JSFiddle demo
Your initial code waited for the whole 18 seconds to complete before restarting.