Having multiple copies of the texts is a step in the right direction.
To simplify things, imagine all the text lined up in one banner. With an even number of copies, translating the entire banner to the left (negative X direction) by 50% on each animation iteration will create a continuous appearance as the second half overlaps the first at x=0.
You may be able to achieve the desired effect with just two copies, but I have included 4 copies for wider screen flexibility.
.banner {
height: 40px;
position: relative;
overflow: hidden;
font-family: Roobert;
font-style: normal;
font-weight: normal;
font-size: 24px;
line-height: 36px;
min-width: 200vw;
/* ADDED */
animation: bannermove 40s linear infinite;
display: flex;
justify-content: space-between;
}
.banner:hover {
animation-play-state: paused;
}
@keyframes bannermove {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
.banner div {
padding: 10px;
/* just to ensure there is space between even on small devices */
}
<div class="banner">
<div>Dragon</div>
<div>Element</div>
<div>Charger</div>
<div>ZipDrive</div>
<div>LightHouse</div>
<div>Exxtra</div>
<div>Hub</div>
<div>iOS15</div>
<div>File Drive</div>
<div>Netherverse</div>
<div>CLpool</div>
<div>Dragon</div>
<div>Element</div>
<div>Charger</div>
<div>ZipDrive</div>
<div>LightHouse</div>
<div>Exxtra</div>
<div>Hub</div>
<div>iOS15</div>
<div>File Drive</div>
<div>Netherverse</div>
<div>CLpool</div>
<div>Dragon</div>
<div>Element</div>
<div>Charger</div>
<div>ZipDrive</div>
<div>LightHouse</div>
<div>Exxtra</div>
<div>Hub</div>
<div>iOS15</div>
<div>File Drive</div>
<div>Netherverse</div>
<div>CLpool</div>
<div>Dragon</div>
<div>Element</div>
<div>Charger</div>
<div>ZipDrive</div>
<div>LightHouse</div>
<div>Exxtra</div>
<div>Hub</div>
<div>iOS15</div>
<div>File Drive</div>
<div>Netherverse</div>
<div>CLpool</div>
</div>
Adjust the timing of the animation according to your preferences.