How to Fade In/Out multiple texts using CSS/jQuery like on Droplr?

DEMO

A possible solution with pure css!

@-webkit-keyframes fade-in{
from{
    opacity:1;
    top:0px;
}
to{
    opacity:0;
    top:-5px;
}
}
.text-animated-one{
display:inline;
position:relative;
top:0px;
-webkit-animation:fade-in 1s infinite;

}
.text-animated-two{
opacity:0;
display:inline;
position:relative;
margin-left:-56px;
-webkit-animation:fade-in 1s infinite;
-webkit-animation-delay:0.5s;
}

.aggettivi{
display:inline;
width:100px;
height:100px;
}

I know that question is solved, but I thought it might be helpful for someone else so I decided to share xD

I was looking for something more smoother than the sugestion that here was presented, after spend a time looking i made my own solution

Here we will need to think a bit in terms of timeline of an keyframe, in that case the text will only be displayed when the another one has already completed his fade animation

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


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

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

  <p class="js-nametag">Leandro de Lima</p>
  <p class="js-nametag">Game Master</p>

https://codepen.io/theNewt/details/PdWeKX