.logo-container {
    --s: 80px;
    /* size of the logo */
    --d: 50s;
    /* animation duration*/
    --n: 11;
    /* 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());
}
.logo-container:hover img {
    animation-play-state: paused;
}
/* extra styles */
 .logo-container {
    border: 1px solid;
    padding-block: 15px;
    margin: 20px auto;
    padding-top:10px;
    padding-bottom:10px;
}
@keyframes x {
    to {
        offset-distance: 100%
    }
}
:nth-child(2 of .container) img {
    animation-direction: reverse;
}