JSFiddle - React, Tailwind, and code Playground

HTML

<div id="caption"><span>Masked Animation</span></div>

CSS

body {background: #000}

div {
    
    display: inline-block; 
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -60px 0 0 -160px;
    color: white; 
    font: 36px Verdana;
    width: 400px;
    height: 100px;
    overflow: hidden;

}

span {
    display: inline-block; 
    width: 0; 
    position: absolute; 
    top: 0; 
    left: 400px;
    white-space: nowrap;
    background: red;
    padding: 20px;
    transition: all 0.5s ease-out;
}

.animate-mask span {left: 0; width: 400px}

JavaScript

setTimeout(function() {
    
    document.getElementById('caption').className = 'animate-mask';
    
}, 1000);