css3 文字动画持续时间问题

Question

请看这个fiddle。

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

3 span 之后会出现很长的空隙。是什么原因？？我怎样才能解决这个问题？？我不明白。

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

这对你有用吗？

css3 文字动画持续时间问题

css3 text animation duration issue

css

keyframe

css-animations