Marquee

by igorrybalko

HTML

<div class="ticker">
    <div class="ticker__track">
        <span>Important information — Website news — Discounts — New arrivals — More text — Text</span>
        <span>Important information — Website news — Discounts — New arrivals — More text — Text</span>
    </div>
</div>

CSS

.ticker {
    overflow: hidden;
    white-space: nowrap;
}

.ticker__track {
    display: inline-flex;
    width: max-content;
    animation: ticker 20s linear infinite;
}

.ticker__track span {
    padding-right: 50px;
}

@keyframes ticker {
    to {
        transform: translateX(-50%);
    }
}