JSFiddle - React, Tailwind, and code Playground

HTML

<div id='bgcont'>
    <p>
        &nbsp;<span>Gnome</span>
    </p>
    <p>
        &nbsp;<span>Testfile</span>
    </p>
    <p>
        &nbsp;<span>Myfilenew</span>
    </p>
    <p>
        &nbsp;<span>Textshadow</span>
    </p>
</div>

CSS

#bgcont {
    background:#222;
    min-width:500px;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    right:0;
    color:#444;
}
p {
    margin:5px;
    position: relative;
}
span {
    position: absolute;
}
p:nth-child(1) {
    color:red;
    font-size:100px;    
}
p:nth-child(1) span {
    -webkit-animation: move 7s cubic-bezier(.47, .49, .47, .49) infinite alternate;
}
p:nth-child(2) {
    color:green;
    font-size:60px;    
}
p:nth-child(2) span {
    -webkit-animation: move 7s cubic-bezier(.10, .49, .47, .49) infinite;
}
p:nth-child(3) {
    color:yellow;
    font-size:90px;
}
p:nth-child(3) span {
    -webkit-animation: move 4s cubic-bezier(.47, .29, .47, .49) infinite alternate;
}
p:nth-child(4) {    
    color:orange;
    font-size:90px;
}
p:nth-child(4) span {
    -webkit-animation: move 5s cubic-bezier(.47, .49, .47, .49) infinite;
}
@-webkit-keyframes move {
    100% {
        left: 0;
    }
    0% {
        left: 100%;
        -webkit-transform: translate(-100%);
    }
}