.container {
  --s: 150px; /* size of the logo */
  --d: 8s; /* animation duration*/
  --n: 4; /* number of visible logos */
  display: flex;
  overflow: hidden;
  mask: 
    linear-gradient(90deg,#0000, #000 10% 90%,#0000);
}

img {
  width: var(--s);
  offset: shape(from calc(var(--s)/-2) 50%,hline by calc(sibling-count()*max(100%/var(--n),var(--s) + 10px)));
  animation: x var(--d) linear infinite calc(-1*sibling-index()*var(--d)/sibling-count());
}
@keyframes x { 
  to {offset-distance: 100%}
}

.container:hover img {
  animation-play-state: paused
}

/* extra styles */
.container {
  border: 1px solid;
  padding-block: 5px;
  margin: 20px auto;
}
:nth-child(2 of .container) img {
  animation-direction: reverse;
}
body {
  background: #ffefd5;
}
.lead { font-size: 1.5rem; font-weight: 300;background: linear-gradient(to right, #000000 0%, #000000 50%,#999999 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color:transparent; }
#wrapper { margin: 50px auto; max-width: 960px; }
h1 {
  background: linear-gradient( 120deg, #bd34fe 30%, #41d1ff );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}