JSFiddle - React, Tailwind, and code Playground

by Felis Catus

HTML

<script src="https://fonts.googleapis.com/css?family=Noto+Sans"></script>
<div ng-app>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<span ng-hide="true">title</span><span class="title-el ng-cloak" ng-repeat="ch in 'title'.split('') track by $index" style="-webkit-animation-name:type-l{{$index+1}}">{{ch}}</span>
</div>

CSS

@-webkit-keyframes type-l1 {
  0% {opacity: 0; color: white; border-right-color: transparent;}
  10% {opacity: 0; color: gray; border-right-color: transparent}
  15% {opacity: 1; color: gray; border-right-color: gray;}
  20% {opacity: 1; color: white; border-right-color: gray;}
  21% {opacity: 1; color: white; border-right-color: transparent;}
  69% {opacity: 1; color: white; border-right-color: transparent;}
  69.1% {opacity: 0; color: white; border-right-color: transparent;}
  100% {opacity: 0; color: white; border-right-color: transparent;}
}
@-webkit-keyframes type-l2 {
  0% {opacity: 0; color: white; border-right-color: transparent;}
  20% {opacity: 0; color: gray; border-right-color: transparent}
  25% {opacity: 1; color: gray; border-right-color: gray;}
  30% {opacity: 1; color: white; border-right-color: gray;}
  31% {opacity: 1; color: white; border-right-color: transparent;}
  68% {opacity: 1; color: white; border-right-color: transparent;}
  68.1% {opacity: 0; color: white; border-right-color: transparent;}
  100% {opacity: 0; color: white; border-right-color: transparent;}
}
@-webkit-keyframes type-l3 {
  0% {opacity: 0; color: white; border-right-color: transparent;}
  30% {opacity: 0; color: gray; border-right-color: transparent}
  35% {opacity: 1; color: gray; border-right-color: gray;}
  40% {opacity: 1; color: white; border-right-color: gray;}
  41% {opacity: 1; color: white; border-right-color: transparent;}
  67% {opacity: 1; color: white; border-right-color: transparent;}
  67.1% {opacity: 0; color: white; border-right-color: transparent;}
  100% {opacity: 0; color: white; border-right-color: transparent;}
}
@-webkit-keyframes type-l4 {
  0% {opacity: 0; color: white; border-right-color: transparent;}
  40% {opacity: 0; color: gray; border-right-color: transparent}
  45% {opacity: 1; color: gray; border-right-color: gray;}
  50% {opacity: 1; color: white; border-right-color: gray;}
  51% {opacity: 1; color: white; border-right-color:...