<div class="flow">

      <span>F</span>
      <span>A</span>
      <span>S</span>
      <span>H</span>
      <span>I</span>
      <span>O</span>
      <span>N</span>
      </div>
 .flow{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 100;
    font-size: 50px;
    text-align: center;
    opacity:1;
    letter-spacing: .3em;
    background-color:#862cab;
    color:white;
    width:100%;
    height:auto;
    
   }
   .flow span{
       display: inline;
        position: relative;
      animation: flow 14s infinite;
        opacity:0;
        
    }
    @keyframes flow  {25%{opacity:1;} 40%{opacity:0;}}
    .flow span:nth-child(1){animation-delay:0s; }
    .flow span:nth-child(2){animation-delay:2s; }
    .flow span:nth-child(3){animation-delay:4s; }
    .flow span:nth-child(4){animation-delay:6s; }
    .flow span:nth-child(5){animation-delay:8s; }
    .flow span:nth-child(6){animation-delay:10s;}
    .flow span:nth-child(7){animation-delay:12s;}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.