JSFiddle - React, Tailwind, and code Playground

by bluey

HTML

<h1 class="animateheading">SERVICES</h1> 
<h1 class="animateheading">A LONGER CENTERED TEXT</h1> 
<h1 class="animateheading">THIS HEADING IS REALLY VERBOSE AND IT COULD TAKE SEVERAL ROWS</h1>

CSS

.animateheading {
  width: 100%;
  color: #333;
  text-align: center;
  font: 2em Helvetica, Arial;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.animateheading:before,
.animateheading:after {
   content: "";
   flex-grow: 1;
   height: 1px;
   min-width: 100px;
   border-top: 1px #333 solid;
}

.animateheading:before { 
 margin-right: .3em; 
 -webkit-animation: lineleft 3s linear 1s forwards; 
 -moz-animation: lineleft 3s linear 1s forwards; 
 animation: lineleft 3s linear 1s forwards; 
}

.animateheading:after  { 
  margin-left: .3em;
 -webkit-animation: lineright 3s linear 1s forwards; 
 -moz-animation: lineright 3s linear 1s forwards; 
 animation: lineright 3s linear 1s forwards; 
} 

@-webkit-keyframes lineleft {
  from { -webkit-transform: translate(0, 0); }
  to { -webkit-transform: translate(-100%, 0); }
}
@keyframes lineleft {
  from { transform: translate(0, 0); }
  to { transform: translate(-100%, 0); }
}

@-webkit-keyframes lineright {
  from { -webkit-transform: translate(0, 0); }
  to { -webkit-transform: translate(100%, 0); }
}
@keyframes lineright {
  from { transform: translate(0, 0); }
  to { transform: translate(100%, 0); }
}