Categories
discuss

Removing the delay on text animation – HTML/CSS

I have the following code: /*Vertical Flip*/ .verticalFlip { display: inline; } .verticalFlip span { animation: vertical 5s linear infinite 0s; -ms-animation: vertical 5s linear infinite …

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?

Answer

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>
Source: stackoverflow
Text is available under the Creative Commons Attribution-ShareAlike License; additional terms may apply. By using this site, you agree to the Privacy Policy, and Copyright Policy. Content is available under CC BY-SA 3.0 unless otherwise noted. The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 © No Copyrights, All Questions are retrived from public domain..