Translate carousel
The track duplicates partner names; animating translateX by half the width loops seamlessly inside .translate-carousel-card.
Widely Supported
Quick implementation
@keyframes translate-carousel-marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.translate-carousel-card { overflow: hidden; }
.translate-carousel-track {
display: flex; width: max-content;
animation: translate-carousel-marquee 16s linear infinite;
}Prompt this to your LLM
Logo strips and tickers.
You are building an infinite horizontal marquee in CSS.
Goal: flex row duplicated; animate translateX from 0 to -50%; linear; infinite; parent overflow hidden.
Constraints:
- prefers-reduced-motion: pause at translateX(0).
- No layout thrash (transform only).
Return HTML + CSS.Why this matters in 2026
Social proof rows remain ubiquitous; a transform-only marquee avoids reflow-heavy scroll scripts.
The logic
Duplicating the sequence makes -50% land on an identical frame, hiding the seam.
Accessibility & performance
Stop motion for reduced-motion users; avoid critical text only inside the strip.