JSFiddle - React, Tailwind, and code Playground

by GioLogist

HTML

<script src="https://fonts.googleapis.com/css2?family=Khula:wght@800&amp;display=swap"></script>
<div class="style-text">
  <span class="animate-text-reveal">See what your
  </span><br><span class="animate-text-reveal">friends buy</span> 👀
</div>

CSS

body {
  background: red;
}

.style-text {
    margin: 100px auto 50px;
    font-family: 'Khula', sans-serif;
    font-size: 42px;
    font-weight: 800;
    font-stretch: normal;
    font-style: normal;
    line-height: .96;
    letter-spacing: -.84px;
    color: #fff;
}

.animate-text-reveal {
  display: inline-block;
  position: relative;  
  overflow: hidden;
  animation-name: reveal-text-text;
  animation-duration: 1.7s;
  color: white;
}

.animate-text-reveal::before {
  top: 0;
  left: 0;
  text-indent: 0px;
  content: '';
  position: absolute;
  background-color: white;
  height: 100%;
  width: 100%;
  animation-name: reveal-text-bg;
  animation-duration: 1.7s;
  transform: translateY(100%);
  overflow: hidden;
}


@keyframes reveal-text-bg {
  0%, 50% {
    transform: translateY(100%);
    transform-origin: 0% 100%;
  }
  50%, 60% {
    transform: translateY(0);
    transform-origin: 0% 0%;
  }
  100% {
    transform: translateY(-100%);
  }
}


@keyframes reveal-text-text {
  0%, 50% {
	  color: rgba(0, 0, 0, 0);
  }
  51% {
	  color: rgba(255, 255, 255, 1);
  }
  100% {
    color: white;
  }
}