Trusted by
The strip scrolling by itself is a marquee — hover to pause it; the dissolve at each end is the edge fade
Marquee
/ animation + @keyframes translateX · <marquee> /
also called ticker, logo carousel, auto-scrolling strip
“The logos that slide across by themselves” is a marquee — content auto-scrolling in an endless horizontal loop, named after the deprecated <marquee> tag. Today it is a CSS transform loop over duplicated content, dissolved at both ends by an edge fade. Windows separately calls the indeterminate progress bar style “marquee”, which is a different thing.
If you called it…
…you meant a marquee.
Anatomy — every part, named
- 1Edge fade
mask-image: linear-gradient(…)“The logos dissolving at both ends of the strip” is the edge fade — a mask, not a painted gradient.
Prompt — paste into your agent
Build a marquee: an auto-scrolling horizontal strip using a CSS @keyframes translateX(-50%) loop over exactly-duplicated content (never the deprecated <marquee> tag), with edge fade masks, pause on hover via animation-play-state, and a prefers-reduced-motion fallback that stops the motion.
Debug prompt — when it misbehaves
Paste this, then describe what you’re seeing — it hands your agent the classic failure modes to rule out first.
Debug my marquee (CSS translateX keyframe loop, react-fast-marquee). Rule out: the loop jumping at the seam because the content is not duplicated exactly once and translated by exactly -50%; animating left/width on the main thread instead of transform; hover-pause missing (animation-play-state); motion still running under prefers-reduced-motion; the deprecated <marquee> tag pasted in from an old snippet. The symptom:
In code
The exact names this thing goes by in code — each row is one framework’s word for it. Use the row that matches your project (or paste it into your prompt).
| CSS | animation + @keyframes translateX | the modern way: a transform loop over duplicated content |
| HTML | <marquee> | long deprecated — never ship it, but it named the pattern |
| React | react-fast-marquee | |
| CSS | animation-play-state: paused | hover-pause |