Removing the delay on text animation - HTML/CSS

Issue

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?

Solution

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>

Answered By - dale landry