JSFiddle - React, Tailwind, and code Playground

by GioLogist

HTML

<span class="animate-text-reveal">
Some text here 
</span>

CSS

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


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


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


@keyframes reveal-text-text {
  0%, 50% {
	  color: rgba(0, 0, 0, 0);
  }
}