css3 文本动画持续时间问题

Question

请看这个 fiddle 。

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

上面的 fiddle 中显示了 6 个文本。我只想显示 3 个文本。所以我删除了 3 个跨度标签。看下面的 fiddle 。

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

在 3 个跨度之后，将显示一个长间隙。是什么原因？？我怎样才能解决这个问题？？我不明白。

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

您还需要减少动画运行的秒数。在下面的示例中，我已将其调低为 9，您仍然在 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;}

我还删除了 JSFIDDLE 中不再需要的 nth-child

这对您有何帮助？