STRUCTURE / 56PX
Back to library
INTERACTION_022
Logo Marquee.
The track is duplicated and translated -50% on loop, with mask-image fading both edges so items dissolve rather than clip.
- CATEGORY
- Background
- COMPLEXITY
- Easy
- TECH
- CSS
- PLATFORM
- Both
- PERFORMANCE
- Light
LIVE PLAYGROUND
LOVABLECURSORBOLTV0REPLITWINDSURFLOVABLECURSORBOLTV0REPLITWINDSURF
CSS / CSS
.marquee {
overflow: hidden;
mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track {
display: flex;
width: max-content;
animation: marquee 26s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }