JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="box">
  <div class="stick" style="transform: translateX(100%);"></div>
  <div class="text">
    <div><span>T</span></div>
    <div><span>A</span></div>
    <div><span>M</span></div>
    <div><span>T</span></div>
    <div><span>A</span></div>
  </div>
  <div class="stick" style="transform: translateX(-100%); height: 3px;"></div>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Sedgwick+Ave');
body {
  margin: 0;
}
* {
  box-sizing: border-box;
  font-family: 'Sedgwick Ave', cursive;
}
div.box {
  margin: 100px auto;
  text-align: center;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  overflow: hidden;
}
div.text {
  text-align: center;
}
div.stick {
  width: 100%;
  height: 4px;
  background: black;
  margin: 10px 0;
  animation: luka 1.5s cubic-bezier(0.78, 0.04, 0.25, 1) forwards;
}
div.text:after {
  content: '';
  display: table;
  clear: both;
}
div.text div {
  float: left;
  font-size: 40px;
  padding: 0 10px;
  overflow: hidden;
}
div.text div span {
  display: inline-block;
  transform: translateX(-200%);
  animation: luka 1s cubic-bezier(0.78, 0.04, 0.25, 1) forwards;
}
@keyframes luka {
  100% {
    transform : translateX(0);
  }
}

JavaScript

var a = document.querySelectorAll('span');

for(var i = 1 ; i < a.length ; i++ ){
	a[i].style.animationDelay = (i/10) + 's';
}