<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;}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.