<ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
body {
body {
background: rgb(64, 64, 75);
}
li {
top: 150px;
left: -1%;
position: absolute;
color: rgb(64, 125, 255);
animation: scrollRight 3s linear infinite;
}
@keyframes scrollRight {
0% { left: -10%; opacity: .25; }
10% { left: 20%; opacity: .5; }
20% { left: 35%; opacity: .75; }
30% { left: 45%; opacity: 1; }
50% { left: 50%; }
70% { left: 55%; opacity: 1; }
80% { left: 65%; opacity: .75; }
90% { left: 80%; opacity: .5; }
100% { left: 100%; opacity: .25; }
}
li:nth-child(2) {
animation-delay: .1s
}
li:nth-child(3) {
animation-delay: .2s
}
li:nth-child(4) {
animation-delay: .3s
}
li:nth-child(5) {
animation-delay: .4s
}
li:nth-child(6) {
animation-delay: .5s
}