JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="word">h</div>
<div class="word"style="animation-delay: .1s;">e</div>
<div class="word"style="animation-delay: .2s;">l</div>
<div class="word"style="animation-delay: .3s;">l</div>
<div class="word" style="animation-delay: .4s;">o</div>
<div class="word" style="animation-delay: .5s;">w</div>
<div class="word" style="animation-delay: .6s;">o</div>
<div class="word" style="animation-delay: .7s;">r</div>
<div class="word" style="animation-delay: .8s;">l</div>
<div class="word" style="animation-delay: .9s;">d</div>

CSS

body {
  background: black;
}
div.word {
  display: inline-block;
  font-size: 100px;
  color: white;
  text-transform: upprecase;
  font-weight: bold;
-webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  transform: translateX(100px);
  animation: a cubic-bezier(0.6, 0.09, 0.15, 1.32) .7s forwards;
}
@keyframes a {
  50% {
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }

  100% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
transform: translateX(0);
  }
}