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>
</div>

CSS

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

.animation-text-wipe {
    opacity: 0;
}

.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-image: linear-gradient(to left, #0000 25%, #0000 75%);
    }

    50% {
        opacity: 1;
        -webkit-mask-image: linear-gradient(to left, #0000 25%, #000F 75%);
    }

    100% {
        opacity: 1;
        -webkit-mask-image: linear-gradient(to left, #000F 25%, #000F 75%);
    }
}



/**
 * 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

/*

This is an intentionally non-working example.

A regular thought process would suggest animating
the gradient itself to create the desired effect,
but CSS animations do not work as expected.

A working implementation of this can be found here:

https://jsfiddle.net/7my6copn/2/

*/