Having Trouble With Sliding Word Animation

I've been working on a css animation and running into trouble. I would like the animation of the yellow span text to resemble that of the purple span at https://getstark.co/pricing

Solution 1:

Make it simple by using CSS key-frame animation without JavaScript.

Below is an example.

body{
    font-family:calibri;
  }
.plans-wrapper-title{
  margin:0;
}
.team, .marketing, .instagram, .stories, .campaign, .friends, .designs, .brand, .club{
  background-color: yellow; 
  display:inline-block;
  position: relative;
  vertical-align: top;
}
.hidden{
  background-color: yellow; 
  position:absolute;
  display:inline-block;
  opacity:0;
  animation: slideme 18s infinite;
  white-space: pre;
  width: auto;
}

.team{
  width: 70px;
}
.marketing{
  width: 135px;
}

.hidden:nth-child(1){
  animation-delay: 2s;
}
.hidden:nth-child(2){
  animation-delay: 4s;
}
.hidden:nth-child(3){
  animation-delay: 6s;
}

.hidden:nth-child(4){
  animation-delay: 8s;
}
.hidden:nth-child(5){
  animation-delay: 10s;
}
.hidden:nth-child(6){
  animation-delay: 12s;
}

.hidden:nth-child(7){
  animation-delay: 14s;
}
.hidden:nth-child(8){
  animation-delay: 16s;
}
.hidden:nth-child(9){
  animation-delay: 18s;
}
@keyframes slideme {
  0% {
    top: -20px;
    opacity:0;
  }
  5% {
    top: 0;
    opacity:1;
  }
  10%{
    top : 0;
    opacity:1;
  }
  15%{
    opacity:0;
  }
  20% {    
  opacity:0;
    top : 0;
  }
  30% {
    opacity:0;
    top: 20px;
  }
}

<divclass="plans-wrapper-header"><h1class="plans-wrapper-title"><div>
        Do more with your 
          <divclass="brand plans-wrapper-title-item"><spanclass="hidden team">team</span><spanclass="hidden marketing">marketing</span><spanclass="hidden instagram">instagram</span><spanclass="hidden stories">stories</span><spanclass="hidden campaign">campaign</span><spanclass="hidden friends">friends</span><spanclass="hidden designs">designs</span><spanclass="hidden brand">brand</span><spanclass="hidden club">club</span></div></div></h1></div>

You can also test it here

I have used this solution for the animation..