JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <span class="animate">text 1</span>
  <span>text 2</span>
</div>

CSS

div{
  position:relative;
  height: 50px;
}
div span{
  position:absolute;
  display:block;
  width:100%;
  height:100%;
  background:#fff;
}

.animate{
  z-index:1;
  animation: animate 8s linear alternate infinite ;
}

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