CODEWITHSUNDEEP
htmlcss
user18798188
user18798188

Reputation:

fade in fade out animation on three different text css

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 class="nametag"> text 1 </h1>
<h1 class="nametag"> text 2 </h1>
<h1 class="nametag"> 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;
  }
}

Upvotes: 2

Views: 3530

Answers (3)

Paul Barretto
Paul Barretto

Reputation: 9

Single text fade up animation

Check on CodePen/MDN

<style>
h1{
    font-size: 80px;
   color: #ddd;
display:grid;
text-align:center;
}


/* Text Animation  START */
.ani_text,.ani_text_reverse{
    position: relative;
    display: inline-block;
    overflow: hidden;
}
.ani_text_inner{
    position: relative;
    transform: translateY(100%);
    display: inline-block;
    transition: 0.4s ease;
    opacity: 0;
}
/* Text Animation END */
</style>

    <h1>
        <span>
            <span class="ani_text">Donald</span>
            <span class="ani_text_reverse">John</span>
        </span> 
        <span>
            <span class="ani_text">Tru</span><span class="ani_text_reverse">mp</span>
        </span>
    </h1>

<script>

let the_text = document.querySelectorAll('.ani_text'); 
let ani_text_reverse = document.querySelectorAll('.ani_text_reverse'); 
the_text.forEach(el => {
    textAnimation(el)
})
ani_text_reverse.forEach(el => {
    textAnimation_reverse(el)
})

function textAnimation(item){
  
  let text_arr = item.textContent.toString().split("")
  item.textContent = ' '
  text_arr.forEach((el, list) => {
    let inner_span = document.createElement('span');
        inner_span.setAttribute('class', 'ani_text_inner');
        inner_span.textContent = el;
    item.append(inner_span);

    setTimeout(() => {
      inner_span.style.cssText = `transform:translateY(0%); opacity:1; transition-delay:0.${list + 1}s`;
    }, 500);
  })
}

function textAnimation_reverse(item){
  let text_arr = item.textContent.toString().split("")
  item.textContent = ' ';
  let Inn_spans = [];
  text_arr.forEach((el, list) => {
    let inner_span = document.createElement('span');
        inner_span.setAttribute('class', 'ani_text_inner');
        inner_span.textContent = el;
    item.append(inner_span);
    Inn_spans.push(inner_span);
  })
  setTimeout(() => {
    for(let i = text_arr.length - 1; i >= 0; i--){
      Inn_spans[i].style.cssText = `transform:translateY(0%); opacity:1; transition-delay:0.${Inn_spans.length - i}s`;
      // transition-delay:0.${i + 1}s
    }
  }, 500);
}
</script>

Upvotes: 0

Christian
Christian

Reputation: 5531

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 class="nametag"> text 1 </h1>
<h1 class="nametag"> text 2 </h1>
<h1 class="nametag"> text 3 </h1>

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

Read more about animations on w3schools.

Upvotes: 3

cSharp
cSharp

Reputation: 3159

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.

Upvotes: 0

Related Questions