html - I create Fade in and Fade out effect using Css different ease but

Question

I create Fade in and Fade out effect using different CSS ease using this site: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function I use few ease codes from that website but It seems like the letters are just blinking, I need them to come in one a time in sequential order (fading in).

.fade-in {
      animation: fadeIn infinite alternate ease 2s;  
    }
    
    @keyframes fadeIn {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }

<h1 class="fade-in">Its just fade in not out i want fade in and out in loop never stop it.</h1>

Answer 1

To make it feel like fade in and out, assign it a duration, Like:

animation: fadeIn 2s infinite alternate ease;

• Here the 2s is the duration or we can say the total time taken by the animation.

.fade-in {
  animation: fadeIn 2s infinite alternate ease;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<h1 class="fade-in">Its just fade in not out i want fade in and out in loop never stop it.</h1>