javascript - How to fade in and fade out text in loop

Question

I want the text to fade in and fade out in the loop never stop it. like, come fade in then out again and again with HTML CSS. I'm going to share with you my code which just does fade in not do fade out and loop also not so anybody sees my code and told me how I can do that with HTML OR CSS because I want to use this animated type text on WordPress website with one build on the Elementor page builder. so please help. Thank You

.fade-in {
  animation: fadeIn ease 10s;
  -webkit-animation: fadeIn ease 10s;
  -moz-animation: fadeIn ease 10s;
  -o-animation: fadeIn ease 10s;
  -ms-animation: fadeIn ease 10s;
}

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

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

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

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

@-ms-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

Use animation-direction and animation-iteration properties.

Combined into a shorthand, you get a property like : animation: fadeIn infinite alternate ease 2s

Change duration as necessary

.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>