JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
	<div id="list0title" class="nowPlayAnimate"></div>
</div>

<div id="wrapper">
	<div id="list0artist" class="nowPlayAnimate"></div>
</div>

CSS

#wrapper {
	width: 250px;
	height: 40px;
	background-color: #383838;
	color: red;
}
.nowPlayAnimate {
	position:absolute;
	white-space:nowrap;
	overflow: hidden;
	-moz-animation: slidein 1s infinite linear alternate;
	-webkit-animation: slidein 1s infinite linear alternate;
	-o-animation: slidein 1s infinite linear alternate;
	animation: slidein 1s infinite linear alternate;
}
@-moz-keyframes slidein {
    from {
		transform:translateX(0);
	}
    to {
		transform:translateX(calc(-100% + 250px)); /* -100% + parent width */
    }
}
@-webkit-keyframes slidein {
    from {
        -webkit-transform:translateX(0);
    }
    to {
        -webkit-transform:translateX(calc(-100% + 250px));
	}
}
@-o-keyframes slidein {
    from {
        -o-transform:translateX(0);
    }
    to {
        -o-transform:translateX(calc(-100% + 250px));
    }
}
@keyframes slidein {
    from {
        transform:translateX(0);
    }
    to {
        transform:translateX(calc(-100% + 250px)); 
	}
}

JavaScript

var testtext="Animation";
document.getElementById("list0title").innerHTML=testtext;
var testtext="More Animation";
document.getElementById("list0artist").innerHTML=testtext;