删除文本动画的延迟-HTML/CSS

Question

我有以下代码：

/*Vertical Flip*/
.verticalFlip {
display: inline;
}
.verticalFlip span {
animation: vertical 5s linear infinite 0s;
-ms-animation: vertical 5s linear infinite 0s;
-webkit-animation: vertical 5s linear infinite 0s;
color: #ea1534;
opacity: 0;
overflow: hidden;
position: absolute;
}
.verticalFlip span:nth-child(2) {
animation-delay: 2.5s;
-ms-animation-delay: 2.5s;
-webkit-animation-delay: 2.5s;
}

/*Vertical Flip Animation*/
@-moz-keyframes vertical {
0% {
opacity: 0;
}
5% {
opacity: 0;
-moz-transform: rotateX(180deg);
}
10% {
opacity: 1;
-moz-transform: translateY(0px);
}
25% {
opacity: 1;
-moz-transform: translateY(0px);
}
30% {
opacity: 0;
-moz-transform: translateY(0px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes vertical {
0% {
opacity: 0;
}
5% {
opacity: 0;
-webkit-transform: rotateX(180deg);
}
10% {
opacity: 1;
-webkit-transform: translateY(0px);
}
25% {
opacity: 1;
-webkit-transform: translateY(0px);
}
30% {
opacity: 0;
-webkit-transform: translateY(0px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@-ms-keyframes vertical {
0% {
opacity: 0;
}
5% {
opacity: 0;
-ms-transform: rotateX(180deg);
}
10% {
opacity: 1;
-ms-transform: translateY(0px);
}
25% {
opacity: 1;
-ms-transform: translateY(0px);
}
30% {
opacity: 0;
-ms-transform: translateY(0px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}

/* text */
#hero h1 {
margin: 0;
font-size: 64px;
font-weight: 700;
line-height: 56px;
color: transparent;
background: url("https://lovelytab.com/wp-content/uploads/2019/01/Tumblr-Aesthetic-Wallpapers-Free.jpg") repeat;
background-clip: text;
-webkit-background-clip: text;
}

<section id="hero">
<h1 style="margin-bottom: 16px">Sample
<div class="verticalFlip"><span>Change</span><span>Text</span></div>
</h1>
</section>

这很好，但是，我如何才能消除延迟？文本交替完成后会有很长一段时间的停顿。我希望它能以流畅的方式不断交替文本。我唯一想删除的是长时间的停顿。我不确定是哪个css属性导致了这个问题。有什么建议吗？

Answer 1

您需要调整动画持续时间，还需要调整关键帧百分比->当您使用变换/不透明度规则翻转文本时，中的<青少年>。

我对每一个都进行了轻微的调整，但这取决于你想要它的外观和感觉。将翻转动画传播超过百分之一(你的孩子(将减少你在动画之间暂停的时间。

/*Vertical Flip*/
.verticalFlip {
display: inline;
}
.verticalFlip span {
animation: vertical 3.4s linear infinite 0s;
-ms-animation: vertical 3.4s linear infinite 0s;
-webkit-animation: vertical 3.4s linear infinite 0s;
color: #ea1534;
opacity: 0;
overflow: hidden;
position: absolute;
}
.verticalFlip span:nth-child(2) {
animation-delay: 2s;
-ms-animation-delay: 2s;
-webkit-animation-delay: 2s;
}

/*Vertical Flip Animation*/
@-moz-keyframes vertical {
0% {
opacity: 0;
}
15% {
opacity: 0;
-moz-transform: rotateX(180deg);
}
35% {
opacity: 1;
-moz-transform: translateY(0px);
}
55% {
opacity: 1;
-moz-transform: translateY(0px);
}
80% {
opacity: 0;
-moz-transform: translateY(0px);
}
90% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes vertical {
0% {
opacity: 0;
}
15% {
opacity: 0;
-webkit-transform: rotateX(180deg);
}
35% {
opacity: 1;
-webkit-transform: translateY(0px);
}
55% {
opacity: 1;
-webkit-transform: translateY(0px);
}
80% {
opacity: 0;
-webkit-transform: translateY(0px);
}
95% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@-ms-keyframes vertical {
0% {
opacity: 0;
}
15% {
opacity: 0;
-ms-transform: rotateX(180deg);
}
35% {
opacity: 1;
-ms-transform: translateY(0px);
}
55% {
opacity: 1;
-ms-transform: translateY(0px);
}
80% {
opacity: 0;
-ms-transform: translateY(0px);
}
95% {
opacity: 0;
}
100% {
opacity: 0;
}
}

/* text */
#hero h1 {
margin: 0;
font-size: 64px;
font-weight: 700;
line-height: 56px;
color: transparent;
background: url("https://lovelytab.com/wp-content/uploads/2019/01/Tumblr-Aesthetic-Wallpapers-Free.jpg") repeat;
background-clip: text;
-webkit-background-clip: text;
}

<section id="hero">
<h1 style="margin-bottom: 16px">Sample
<div class="verticalFlip"><span>Change</span><span>Text</span></div>
</h1>
</section>