css3文本动画持续时间问题答案

【问题标题】：css3 text animation duration issuecss3文本动画持续时间问题
【发布时间】：2015-06-16 18:23:37
【问题描述】：

请看这个小提琴。

上面的小提琴中显示了 6 个文本。我只想显示 3 个文本。所以我删除了 3 个跨度标签。请参阅下面的小提琴。

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

【问题讨论】：

我认为你不明白这是如何工作的。第三个 span 是最后一个动画元素，因此之后不会出现任何其他内容。就像永远一样！
你的意思是因为动画已经结束，所以有很长的间隔，如果你想让它重新开始，你需要刷新页面？
您的版本 3 链接无效，您应该编辑您的帖子并将其添加到那里。
jsfiddle.net/fn6eevew/3
是的，我就是这么说的。

标签： css css-animations keyframe

【解决方案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

这对你有什么作用？

【讨论】：