JSFiddle - React, Tailwind, and code Playground

HTML

<div class="text-animations">
    <h2 class="animation-text-wipe animate-in anim-delay-1">
        A Real Tube Carrying Dreams of 600-M.P.H. Transit 
    </h2>
    <br>
    <span class="animation-text-wipe animate-in anim-delay-2">
        Virgin Hyperloop One is testing a system that would put passengers in pods hurtling through vacuum tubes. Other companies are moving ahead with similar plans.
    </span>
    <p class="animation-text-wipe animate-in anim-delay-3">
    MOAPA, Nev. — California just decided to sharply scale back its plans for a high-speed rail artery meant to transform travel up and down the state. But in the desert outside Las Vegas, the transportation ambitions still seem limitless.
<br><br>
Here, engineers working for Virgin Hyperloop One are testing a radically different type of mass transit: one that aims to move people and cargo in small wheel-less pods in a vacuum tube at speeds that could exceed 600 miles per hour. Today’s swiftest rail travel, at top speeds less than half as fast, would become a quaint anachronism.
<br><br>
The company, which counts Sir Richard Branson’s Virgin Group as a minority investor, is one of several in the United States, Canada and other countries developing hyperloop technology. The concept was promoted by Elon Musk, of electric-car and private-rocket renown, and then offered by one of his companies as open-source technology available to all. It works by propelling pods using magnetic levitation through a low-pressure, near-vacuum tube.
    </p>
</div>

CSS

h2 {
    background: rgba(0, 0, 0, 0.25);
    padding: 5px;
}

.animation-text-wipe {
    opacity: 0;
    -webkit-mask-image: linear-gradient(to left, #0000 25%, #000 75%);
    -webkit-mask-size: 500%;
}

.animation-text-wipe.animate-in {
    animation-name: text-wipe;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.anim-delay-1 { animation-delay: 0.25s; }
.anim-delay-2 { animation-delay: 0.50s; }
.anim-delay-3 { animation-delay: 0.75s; }

/**
 * Safari has issues if you try to animate
 * mask-size, so we set that on the element
 * and only translate the position.
 */
@keyframes text-wipe {
    0% {
        opacity: 1;
        -webkit-mask-position: 100%;
    }

    100% {
        opacity: 1;
        -webkit-mask-position: 0%;
    }
}



/**
 * Arbitrary
 */
body {
    background: url(https://cdn.stocksnap.io/img-thumbs/960w/EQ7NY2JUTY.jpg) center center no-repeat;
    background-size: cover;
    color: #fff;
    font-size: 16px;
    font-family: Verdana, sans-serif;
    text-shadow: 0 0 3px #000, 0 0 2px #000, 0 0 1px #000;
}

JavaScript

/*

The background image is to show that it isn't simply an opaque color reveal on top. 

The point is to fully reveal text with a gradient mask through CSS alone. 

It works in Safari, Chrome, Firefox, Opera, and Edge.

*/