JSFiddle - React, Tailwind, and code Playground

HTML

<span class="halfStyle" data-content="W">W</span>
<span class="halfStyle" data-content="H">H</span>
<span class="halfStyle" data-content="Y">Y</span>

CSS

@-webkit-keyframes slidebefore { 0% { width: 0; } 100% { width:70%; } }
@-moz-keyframes slidebefore { 0% { opacity:0.0; } 50% { opacity:1.0; } }
@-ms-keyframes slidebefore { 0% { opacity:0.0; } 50% { opacity:1.0; } }
@-o-keyframes slidebefore { 0% { opacity:0.0; } 50% { opacity:1.0; } }
@keyframes slidebefore { 0% { opacity:0.0; } 50% { opacity:1.0; } }

@-webkit-keyframes slideafter { 0% { width:70%; left: 30%; } 100% { width:0; left: 100%; } }
@-moz-keyframes slideafter { 0% { opacity:1.0; } 50% { opacity:0.0; } }
@-ms-keyframes slideafter { 0% { opacity:1.0; } 50% { opacity:0.0; } }
@-o-keyframes slideafter { 0% { opacity:1.0; } 50% { opacity:0.0; } }
@keyframes slideafter { 0% { opacity:1.0; } 50% { opacity:0.0; } }

.halfStyle {
    position:relative;
    display:inline-block;
    font-size:5em; /* or any font size will work */
    color: #0099ff;
    overflow:hidden;
    white-space: pre; /* to preserve the spaces from collapsing */
    text-shadow: 0 0 0.2em rgba(0,0,0,0.5);
}
.halfStyle:nth-child(2) {
    color: #00ff99;
}
.halfStyle:nth-child(3) {
    color: #ff9900;
}

.halfStyle:before { /* creates the left part */
    display:block;
    z-index:1;
    position:absolute;
    top:0;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow:hidden;
    pointer-events: none; /* so the base char is selectable by mouse */
    color: #000;
    -webkit-animation: slidebefore 0.5s linear infinite alternate;
    -moz-animation: slidebefore 1s linear infinite alternate;
    -ms-animation: slidebefore 1s linear infinite alternate;
    -o-animation: slidebefore 1s linear infinite alternate;
    animation: slidebefore 1s linear infinite alternate;
}
.halfStyle:after { /* creates the right part */
    display:block;
    direction: rtl; /* very important, will make the width to start from right */
    position:absolute;
    z-index:2;
    top:0;
    left:50%;
    width: 50%;
    content: attr(data-content); /* dynamic...