fade in fade out animation on three different text css-CodePudding

I would like to use this CSS fade in and fade out code in three different texts but it only works only with two different texts.

HTML:

<h1 > text 1 </h1>
<h1 > text 2 </h1>
<h1 > text 3 </h1>

CSS

.nametag{
  position: absolute;
}

.nametag:nth-child(1){
  animation-name: fade;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-duration: 5s;
  animation-direction: alternate-reverse;  
}

.nametag:nth-child(2){
  animation-name: fade;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-duration: 5s;
  animation-direction: alternate;
}

@keyframes fade{
    0%,45% {
      opacity: 0;
}
    100%{
      opacity: 1;
  }
}

CodePudding user response：

You have put the css code for animating them in .nametag:nth-child(1) and .nametag:nth-child(2). That is why it only works for the first 2 and not the third .nametag.

CodePudding user response：

I guess your problem is that the text is always shown. When you run the animation once with a certain delay it partially works.

I have added a delay and another keyframe to hide the text again.

.nametag{
  position: absolute;
}

.nametag:nth-of-type(1){
  animation-name: fade;
  animation-fill-mode: both;
  animation-iteration-count: 1;
  animation-duration: 4s;
  animation-direction: normal;
}

.nametag:nth-of-type(2){
  animation-name: fade;
  animation-fill-mode: both;
  animation-iteration-count: 1;
  animation-delay: 4s;
  animation-duration: 4s;
  animation-direction: normal;
}

.nametag:nth-of-type(3){
  animation-name: fade;
  animation-fill-mode: both;
  animation-iteration-count: 1;
  animation-delay: 8s;
  animation-duration: 4s;
  animation-direction: normal;
}

@keyframes fade{
    0% {
      opacity: 0;
    }
    60% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

<h1 > text 1 </h1>
<h1 > text 2 </h1>
<h1 > text 3 </h1>

You could use a fixed text and just animate the number.

Read more about animations on w3schools.