style.css

* {
    margin: 0;
}

.box {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
}

.heading {
    font-size: 5rem;
    background-color: rgb(236, 207, 255);
    display: flex;
    width: 100vw;
    padding-top: 4rem;
    align-items: center;
    justify-content: center;
}

.separator {
    background-color: rgb(236, 207, 255);
    align-content: center;
    flex: 1;
}

.container {
    width: 90%;
    max-width: 1500px;
    margin-inline: auto;
    position: relative;
    height: 90px;
    overflow: hidden;
    mask-image: linear-gradient(to right,
            rgba(0, 0, 0, 0),
            rgba(0, 0, 0, 1) 20%,
            rgba(0, 0, 0, 1) 80%,
            rgba(0, 0, 0, 0));
}

@keyframes scrollright {
    to {
        right: -200px;
    }
}

.i {
    width: 180px;
    height: 90px;
    position: absolute;
    right: calc(200px * 8);
    animation: scrollright 30s linear infinite;
}

/* animation-delay: (duration * delay * -1) */

.item1 {
    animation-delay: calc(30s / 8 * (8 - 1) * -1);
    background-image: url(images/cn.png);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
}

.item2 {
    animation-delay: calc(30s / 8 * (8 - 2) * -1);
    background-image: url(images/20thtele.png);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
}

.item3 {
    animation-delay: calc(30s / 8 * (8 - 3) * -1);
    background-image: url(images/disney.png);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
}

.item4 {
    animation-delay: calc(30s / 8 * (8 - 4) * -1);
    background-image: url(images/ghibli.png);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
}

.item5 {
    animation-delay: calc(30s / 8 * (8 - 5) * -1);
    background-image: url(images/mgm.png);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
}

.item6 {
    animation-delay: calc(30s / 8 * (8 - 6) * -1);
    background-image: url(images/wbclassic.png);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
}

.item7 {
    animation-delay: calc(30s / 8 * (8 - 7) * -1);
    background-image: url(images/pogo.png);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
}

.item8 {
    animation-delay: calc(30s / 8 * (8 - 8) * -1);
    background-image: url(images/shin-ei.png);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
}