@keyframes scroll-left {
    0% {
        transform: translateX(100%); /* You may want to change this value depending on the marquee's width. */
    }

    100% {
        transform: translateX(-100%);
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.scrollContainer {
    width: 100%;
    overflow-x: scroll;
    scrollbar-width: thin;
}

.scroll {
    display: inline-flex;
}

@media (prefers-reduced-motion: no-preference) { /* Uses the effects if the user doesn't have reduced motion. */
    .scrollContainer:hover .scroll {
        animation-play-state: paused;
        animation: fade-in 0.3s;
    }

    .scrollContainer {
        overflow-x: hidden;
    }

    .scrollContainer:hover {
        overflow-x: scroll;
    }

    .scroll {
        /* Uncomment the cubic-bezier property and remove or comment the linear property for a smooth slow-down effect. */
        animation: scroll-left 8s /* cubic-bezier(0,.27,1,1) */ linear infinite;
    }
}