css3 text animation duration issue

Question

Please see this fiddle.

https://jsfiddle.net/fn6eevew/1/

There are 6 text displayed in the above fiddle. I want displayed only 3 text. So i removed the 3 span tags. see the below fiddle.

https://jsfiddle.net/fn6eevew/2/

After the 3 span a long gap will be showed. What is the reason?? How can i fix this?? I can't understand.

@-webkit-keyframes rotateWord {
0% { opacity: 0; -webkit-animation-timing-function: ease-in; -webkit-transform: translateY(-200px) translateZ(300px) rotateY(-120deg); }
5% { opacity: 1; -webkit-animation-timing-function: ease-out; -webkit-transform: translateY(0px) translateZ(0px) rotateY(0deg); }
6% { text-shadow: 0px 0px 0px rgba(255,255,255,1); color: #000; }
17% { opacity: 1; text-shadow: 0px 0px 0px rgba(255,255,255,1); color: #000; }
20% { opacity: 0; }
100% { opacity: 0; }
}

Answer 1

You need to reduce the number of seconds that the animation runs for also. I have turned it down to 9 in the example below, You had it still at 18:

.rw-words span{position: absolute;font-size: 80px;left:0px;width:100%;text-align:center; top:25%;color: transparent;text-shadow: 0px 0px 80px rgba(255,255,255,1);opacity: 0;-webkit-animation: rotateWord 9s infinite;-ms-animation: rotateWord 9s infinite;animation: rotateWord 9s infinite; line-height:130px;}

I also removed the nth-child that are no longer needed in the JSFIDDLE

How does this work for you?