CSS Animation Example: Infinite Scrolling Marquee

The "Infinite Scrolling Marquee" is heavily utilized in B2B landing pages to showcase a massive row of client logos that slides endlessly across the screen.

Logo 1

Logo 2

Logo 3

Logo 4

Logo 5

The "trick" to an infinite seamless CSS loop is mathematically deceiving the user's eye by duplicating the contents. Inside the track, you must have two identical sets of items.

The track is allowed to stretch infinitely wide using width: max-content. The @keyframes simply translates the entire track continuously to the left using transform: translateX(). Importantly, the animation must stop exactly exactly when the track has moved left by -50% of its width.

Because the first half and the second half of the track are identical, by the time it reaches -50%, the first element of duplicate set "B" is now sitting in the exact pixel position where the first element of set "A" started. The animation loops back to 0% invisibly, resetting the loop.

Here is the code to create the Infinite Scrolling Marquee.

<!doctype html>
<title>Example</title>
<style>
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    font-family: sans-serif;
    background-color: #f0f0f0;
}

/* The window that crops the overflow */
.marquee-container {
    width: 600px;
    background-color: white;
    padding: 20px 0;
    overflow: hidden; /* Crucial */
    position: relative;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    
    /* Adds a slight fade to the edges using a CSS mask */
    -webkit-mask-image: linear-gradient(
        to right, 
        transparent, 
        black 10%, 
        black 90%, 
        transparent
    );
    mask-image: linear-gradient(
        to right, 
        transparent, 
        black 10%, 
        black 90%, 
        transparent
    );
}

/* 
   The track that holds all the items. Note it contains TWO sets of identical items.
   We use flex-shrink: 0 so the track doesn't naturally crush its children to fit.
*/
.marquee-track {
    display: flex;
    gap: 30px; /* Space between logos */
    width: max-content;
    /* 
       To calculate the animation: 
       We animate the track exactly 50% of its width.
       Because the track contains exactly two copies of the same items, 
       shifting it left by 50% perfectly aligns copy B onto the starting spot of copy A.
    */
    animation: scroll-left 10s linear infinite;
}

/* Hovering the container stops the track for easier reading/clicking */
.marquee-container:hover .marquee-track {
    animation-play-state: paused;
}

.marquee-item {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: bold;
    flex-shrink: 0;
}

@keyframes scroll-left {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(calc(-50% - 15px)); 
        /* The -15px is exactly half of the gap space to make the math seamless */
    }
}

@media (prefers-reduced-motion: reduce) {
    .marquee-track {
        animation: none; /* Stops the scrolling */
        flex-wrap: wrap; /* Allows them to stack instead of hiding off-screen */
        width: 100%;
        gap: 10px;
        justify-content: center;
    }
    .marquee-container {
        /* Removes the mask so the wrapped items are visible on the edges */
        mask-image: none;
        -webkit-mask-image: none;
    }
    .marquee-item[aria-hidden="true"] {
        display: none; /* Hide duplicates */
    }
}
</style>

View Output

Accessibility Considerations

Continuous automated motion that the user cannot control is bad practice for readability. We mitigate this partly by setting animation-play-state: paused on the track when the container is hovered or receiving focus.

Furthermore, prefers-reduced-motion is a CSS media feature used to detect if a user has enabled a setting on their device to minimize the amount of non-essential animation or motion. It is recommended to destroy the marquee functionality entirely for these users. By disabling the scrolling animation and applying flex-wrap: wrap on the track, the logos simply stack neatly like a normal grid. We also recommend leveraging the aria-hidden="true" attribute to not only hide the duplicates from screen readers, but also from view for users preferring reduced motion.

Here's what we used in our example:


@media (prefers-reduced-motion: reduce) {
    .marquee-track {
        /* Stops the scrolling */
        animation: none; 
        
        /* Allows the items to stack conventionally rather than bursting out wide */
        flex-wrap: wrap; 
        width: 100%;
        justify-content: center;
    }
    .marquee-item[aria-hidden="true"] {
        /* Hides the duplicate set */
        display: none;
    }
}