Alternating Text in HTML/CSS-CodePudding

I have the following code:

/*Vertical Flip*/

.verticalFlip {
  display: inline;
}

.verticalFlip span {
  animation: vertical 12.5s linear infinite 0s;
  -ms-animation: vertical 12.5s linear infinite 0s;
  -webkit-animation: vertical 12.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;
}

.verticalFlip span:nth-child(3) {
  animation-delay: 5s;
  -ms-animation-delay: 5s;
  -webkit-animation-delay: 5s;
}

.verticalFlip span:nth-child(4) {
  animation-delay: 7.5s;
  -ms-animation-delay: 7.5s;
  -webkit-animation-delay: 7.5s;
}

.verticalFlip span:nth-child(5) {
  animation-delay: 10s;
  -ms-animation-delay: 10s;
  -webkit-animation-delay: 10s;
}


/*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: rgb(1, 16, 231);
  color: white;
  background: url("https://lovelytab.com/wp-content/uploads/2019/01/Tumblr-Aesthetic-Wallpapers-Free.jpg") repeat;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

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

I would like the text to be Sample Change and the Change alternates to Text. Right now, the text is not alternating and its on a new line whereas I would like it to be all on one line and the Sample text does not change (remains constant) but there should be a vertical flip word change on the Change and it should alternate between Text. How can I accomplish this?

This is where I got the code from: https://codepen.io/kaceyatstandcreative/pen/PowbpKm

CodePudding user response：

First, there are some errors in your code:

In HTML, you're missing the </div>.
Typo at should be verticalFlip as indicated in your css
Multiple color properties in a single css #hero h1 block

After fixing those errors, your animation doesn't appear because the -webkit-text-fill-color: transparent; removes any text color. You should change it into color: transparent; in your case.

Updated:

change text to background image
remove delay between text by remove other span dependencies.

/*Vertical Flip*/

.verticalFlip {
  display: inline;
}

.verticalFlip span {
  animation: vertical 4s linear infinite 0s;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  background: url("https://lovelytab.com/wp-content/uploads/2019/01/Tumblr-Aesthetic-Wallpapers-Free.jpg") repeat;
  background-clip: text;
  background-position: 15% 20%;
}

.verticalFlip span:nth-child(2) {
  animation-delay: 2s;
}


/*Vertical Flip Animation*/

@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);
  }
  80% {
    opacity: 0;
    -moz-transform: translateY(0px);
  }
  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 ><span>Change</span><span>Text</span></div></h1>
</section>

CodePudding user response：

You had some broken HTML, so I fixed that. Also replaced the spans with div because transform: rotate only works with block elements, not inline elements like span.

I animated, just by spinning the text, and not changing the opacity. I will leave that up to you if you want to add that. I also added a pause where the text isn't animated (looping from 90% to 10% with 0deg rotation).

In order to get all elements on the same row, I added display: flex to your h1, and to make the spinning text to overlay I was forced to use a grid layout, where both children are on row 1 and column 1 (grid-area). I tried position: absolute but background-clip: text didn't work on Firefox when I did that.

I increased the font size in order to show the background-clip in a better way.

[edit] Apparently, Chrome bugs out when using background-clip: text together with backface-visibility: hidden.

Working example: Firefox

#hero > h1 {
  display: flex;
  margin: 0;
  margin-bottom: 16px;

  font-size: 78px;
  font-weight: 700;

  background: url("https://lovelytab.com/wp-content/uploads/2019/01/Tumblr-Aesthetic-Wallpapers-Free.jpg") repeat;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.verticalflip {
  display: grid;
}

.verticalflip > div {
  --animation-duration: 6s;

  grid-area: 1 / 1;
  animation: vertical var(--animation-duration) linear infinite;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.verticalflip > div:nth-child(1) {
  animation-delay: calc(-0.5 * var(--animation-duration));
}

@keyframes vertical {
  10%  { transform: rotateX(0deg);   }
  40%  { transform: rotateX(180deg); }
  60%  { transform: rotateX(180deg); }
  90%  { transform: rotateX(0deg);   }
}

<section id="hero">
  <h1 style="">
    <div>Sample&nbsp;</div>
    
    <div >
      <div>Change</div>
      <div>Text</div>
    </div>
  </h1>
</section>

Working example: Chrome & Safari

#hero > h1 {
  display: flex;
  margin: 0;
  margin-bottom: 16px;

  font-size: 78px;
  font-weight: 700;

  background: url("https://lovelytab.com/wp-content/uploads/2019/01/Tumblr-Aesthetic-Wallpapers-Free.jpg") repeat;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

#hero div {
  /* Chrome somehow "looses" the background when animating it */
  background: url("https://lovelytab.com/wp-content/uploads/2019/01/Tumblr-Aesthetic-Wallpapers-Free.jpg") repeat;
  -webkit-background-clip: text;
}

.verticalflip {
  display: grid;
}

.verticalflip > div {
  --animation-duration: 6s;

  grid-area: 1 / 1;
  animation: vertical var(--animation-duration) linear infinite;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.verticalflip > div:nth-child(1) {
  animation-delay: calc(-0.5 * var(--animation-duration));
}

@keyframes vertical {
  10%  { transform: rotateX(0deg);   }
  40%  { transform: rotateX(180deg); }
  60%  { transform: rotateX(180deg); }
  90%  { transform: rotateX(0deg);   }
}

<section id="hero">
  <h1 style="">
    <div>Sample&nbsp;</div>
    
    <div >
      <div>Change</div>
      <div>Text</div>
    </div>
  </h1>
</section>