Marquee

Documentation

CSS

.marquee { --gap: 0.5em; display: flex; gap: var(--gap); overflow: hidden; position: relative; }
.marquee-content { animation: scroll 60s linear infinite; display: flex; align-items: center; flex-shrink: 0; gap: var(--gap); justify-content: space-around; min-width: 100%; white-space: nowrap; will-change: transform; }
.marquee-content-item { white-space: nowrap; }
.marquee.logo-marquee { --gap: 2.5em; }
.marquee.logo-marquee img { height: 80px; }

@-webkit-keyframes scroll {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-100% - var(--gap))); }
}
@keyframes scroll {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-100% - var(--gap))); }
}

.marquee-reverse .marquee-content { animation-direction: reverse; }