I have the following code:
/*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>This is working fine, however, how can I remove the delay? There is a long pause after the text alternating gets completed. I would like it to be instant where it keeps on alternating the text in a smooth manner. The only thing I would like to remove is the long pause, that is it. I am not sure which css property is causing that issue. Any suggestions?
You need to play around with the animation duration and also adjust the key frames percentages -> the tween in when you are flipping the text using your transform/opacity rules.
I have slightly adjusted each, but this comes down to a taste in how you want it to look and feel. Spreading the flipping animation over more of a percent (your tween) will lessen the amount of time you have in a pause between animations.
/*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>