12 CSS Infinite Marquee Designs

Use the duplicated-group pattern. Wrap your content in a viewport with overflow: hidden, then place TWO identical content groups inside it as flex children with a gap. Animate each group's transform from translateX(0) to translateX(calc(-100% - var(--gap))) — exactly its own width plus one gap. At the moment the animation restarts, the second copy is standing pixel-perfectly where the first one started, so the reader sees no jump. No measured widths, no JavaScript, no resize listener. Every demo in this gallery uses this pattern, and it's why the loops read as seamless at any content width, at any browser zoom level, at any screen size. Common mistakes: animating to translateX(-100%) WITHOUT compensating for the gap (creates a stutter equal to the gap width every cycle), animating left or margin-left instead of transform (triggers layout every frame — tanks INP), and forgetting to set aria-hidden="true" on the duplicate group (screen readers announce every item twice).

The <marquee> element was deprecated in HTML5 and formally removed from the HTML Living Standard. Browsers still render it for backwards compatibility, but Chrome and Firefox now emit a deprecation warning in DevTools, iOS and Android WebView support is inconsistent, and screen readers don't announce it as any meaningful element. Every accessibility, performance, and SEO audit will flag it. The replacement is a CSS-only marquee — the duplicated-group pattern above. Every demo in this gallery is a drop-in replacement: seamless loop, pause-on-hover, keyboard-operable pause button via :has(:checked), prefers-reduced-motion fallback to a plain horizontal scroll region, and full accessibility. Copy-paste one demo, delete your old <marquee> element, ship. No library needed.

WCAG 2.2.2 (Pause, Stop, Hide) requires a way to stop any moving content that lasts more than 5 seconds. The best implementation combines three signals: .mqs-01:hover .mqs-01__group { animation-play-state: paused } pauses on mouse hover, .mqs-01:focus-within .mqs-01__group { animation-play-state: paused } pauses when any focusable child receives keyboard focus (so Tab-into a link pauses the loop, which is the whole point — you can't click a moving target), and a real pause control via .mqs-01:has(#pause:checked) .mqs-01__group { animation-play-state: paused }. The pause control is a native <input type="checkbox"> styled as a button — keyboard-operable for free, announced by screen readers as a real checkbox with pressed/unpressed states, zero JavaScript. Every demo in this gallery ships all three signals. Note: hover-only pause fails on touch devices, so the visible pause button is the critical fallback — hover is a nice-to-have.

Wrap the animation in a media query: @media (prefers-reduced-motion: reduce) { .mqs-01__group { animation: none } .mqs-01__viewport { overflow-x: auto } }. The animation stops entirely, and the viewport becomes a regular horizontal scroll region so the reader can browse the content at their own pace. Never just animation-duration: 0s — that leaves the transform stuck mid-cycle and content invisible past the edge. Always fall back to a real scroll region so no content is lost. Roughly 35% of adults have some vestibular sensitivity where continuous horizontal motion causes discomfort; this fallback isn't optional. Every demo in this gallery ships the fallback. Test it by opening System Preferences → Accessibility → Reduce Motion (macOS) or Settings → Accessibility → Motion (Windows/iOS/Android) — the marquee should stop instantly on every demo.

No — and this is exactly the case where the platform ships a better version than any library. Swiper is 200+ KB gzipped and designed for carousels with pagination, not seamless loops. Splide is 45 KB and requires JavaScript initialization + resize listeners. Marquee3k is 4 KB but adds runtime DOM manipulation and mutation observers. The CSS-only pattern in every demo here is 0 KB of JavaScript, works before hydration in SSR frameworks, survives print and reader modes, respects prefers-reduced-motion without a JS handler, and pauses on hover / focus / checkbox via :has(). Modern browsers ship the whole feature at the compositor layer. The three demos in this gallery that DO use JavaScript (live price ticker, draggable inertia, scroll-velocity reactive) use it for logic that CSS genuinely can't do — price data updates, pointer-event physics, scroll-velocity math. Never for the loop itself.

Combine three pieces of state: pointer capture, a running translate transform, and a decay loop. On pointerdown, call element.setPointerCapture(e.pointerId) so subsequent events fire on the marquee even when the pointer leaves the element. On pointermove, add the delta X to the transform: --drag: calc(var(--drag) + \${dx}px). On pointerup, sample the last few frames to compute velocity (pixels per millisecond), then in a requestAnimationFrame loop apply velocity *= 0.94 per frame and update --drag until velocity falls below a threshold. Then hand back to the CSS marquee animation. The 0.94 damping factor is the sweet spot — feels natural without oscillating. Demo 11 in this gallery is the full pattern. The seamless-loop math still works because the drag transform is a modulo of the total content width — dragging past a group boundary snaps back invisibly.

Track scroll delta in a requestAnimationFrame loop: const delta = window.scrollY - lastY; lastY = window.scrollY. Clamp the delta to a reasonable range (say -40 to 40) and write it to a CSS custom property on the marquee root: element.style.setProperty('--velocity', delta). Then in CSS, use that property to drive both the animation speed and a skew transform: animation-duration: calc(var(--speed) - abs(var(--velocity)) * 0.1s); transform: skewX(calc(var(--velocity) * 0.4deg)). Fast scrolling accelerates the marquee AND tilts it in the scroll direction — the classic "speed feels fast" effect popularized by Cuberto and portfolio sites. Demo 12 in this gallery ships the full pattern. The trick is abs() in the duration calc (available since Chrome 125 / Safari 17.4) — without it, scrolling up would reverse the animation speed and read as broken.

Yes — every demo is scoped under a unique .mqs-NN wrapper (mqs-01, mqs-02, …, mqs-12), so any two demos coexist on one page with zero style bleed. All @keyframes are prefixed mqs-NN- to avoid name collisions, and every input id or checkbox is namespaced mqs-NN-*. Continuous motion is guarded with @media (prefers-reduced-motion: reduce) on every demo. No external dependencies, no framework, no runtime JavaScript on the 9 Pure CSS demos. The 3 CSS+JS demos (price ticker, draggable, scroll-velocity) ship self-contained event handlers that attach via document.querySelectorAll, so pasting the HTML+CSS+JS into a fresh index.html produces a working demo with no build step. MIT licensed for personal and commercial projects, no attribution required.