<div class="a01">HELLO WORLD</div>
<div class="a02">HELLO WORLD</div>
<div class="a03">HELLO WORLD</div>
<div class="a04">HELLO WORLD</div>
<div class="a05">HELLO WORLD</div>
<div class="a06">HELLO WORLD</div>

<div class="a01 s1">HELLO WORLD</div>
<div class="a02 s1">HELLO WORLD</div>
<div class="a03 s1">HELLO WORLD</div>
<div class="a04 s1">HELLO WORLD</div>
<div class="a05 s1">HELLO WORLD</div>
<div class="a06 s1">HELLO WORLD</div>

<div class="a01 s2">HELLO WORLD</div>
<div class="a02 s2">HELLO WORLD</div>
<div class="a03 s2">HELLO WORLD</div>
<div class="a04 s2">HELLO WORLD</div>
<div class="a05 s2">HELLO WORLD</div>
<div class="a06 s2">HELLO WORLD</div>

<div class="a01 s3">HELLO WORLD</div>
<div class="a02 s3">HELLO WORLD</div>
<div class="a03 s3">HELLO WORLD</div>
<div class="a04 s3">HELLO WORLD</div>
<div class="a05 s3">HELLO WORLD</div>
<div class="a06 s3">HELLO WORLD</div>
body{
  overflow-x: hidden;
  font-family: Helvetica;
  color: #fff;
  background: #000;
  margin: 20px 0px;
}
div{
  width: 100%;
  text-align: center;
  animation: gradient 2.4s infinite ease-in-out;
  letter-spacing: 10px;
  white-space: nowrap;
  font-size: 20px;
  text-indent: 10px;    
}

.s1{
  font-size: 24px
}
.s2{
  font-size: 28px
}
.s3{
  font-size: 32px
}
.s4{
  font-size: 36px
}
.s4{
  font-size: 40px
}
.s5{
  font-size: 44px
}
.s6{
  font-size: 48px
}



.a01{ 
  animation-delay: 0.1s;
}
.a02{
  animation-delay: 0.2s;  
}

.a03{
  animation-delay: 0.3s;  
}

.a04{
  animation-delay: 0.4s;  
}

.a05{
  animation-delay: 0.5s;  
}

.a06{
  animation-delay: 0.6s;  
}

  
@keyframes gradient{
  0%{
    letter-spacing: 10px;
    text-indent: 10px;
  }
  40%{
    letter-spacing: 50px;
    text-indent: 50px;    
  }

  80%{
    letter-spacing: 10px;
    text-indent: 10px;    
  }
  
  
  100%{
    letter-spacing: 10px;
    text-indent: 10px;    
  }
  
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.