<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JS</li>
    <li>SSG</li>
    <li>webdev</li>
    <li>animation</li>
    <li>UI/UX</li>
 </ul>
 <ul class="alt">
    <li>HTML</li>
    <li>CSS</li>
    <li>JS</li>
    <li>SSG</li>
    <li>webdev</li>
    <li>animation</li>
    <li>UI/UX</li>
  </ul>

$n:7; /* number of elements */

ul  {
  --d: 10s; /* duration */
  
  display: grid;
  grid-template-columns: repeat(4,1fr); /* number of visible images */
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg,#0000,#000 5% 95%,#0000); 
  margin: 0;
  padding: 0;
  list-style: none;
}
ul > li {
  grid-area: 1/1;
  animation: r var(--d) linear infinite;
  font-family: system-ui;
  font-size: 1.3rem;
  padding: 1rem;
  border: .5rem solid #0000;
  text-align: center;
  background: hsl(215, 25%, 27%) padding-box;
  border-radius: 1rem;
}
@for $i from 2 to ($n + 1) {
  ul > li:nth-child(#{$i}) {animation-delay: calc(#{(1 - $i)/$n}*var(--d))}
}
@keyframes r {
  #{100/$n}% {transform: translate(-100%)}
  #{100/$n + .01}% {transform: translate(($n - 1)*100%)}
}

ul.alt li {
  animation-direction: reverse;
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  background: hsl(217, 33%, 17%);
  color: #fff;
}