Question

请看这个小提琴。

上面的小提琴中显示了6个文字。我想只显示3个文字。所以我删除了3个span标签。看下面的小提琴。

在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

这对你有什么用？

css3文本动画持续时间问题

1 个答案: