+7 982 100 5 999

Бесконечная лента текста (анимация css)

HTML

<div class="text-caruisel">
    <div class="text-caruisel--cont">
        <span data-text="We are trusted by over 25,000 clients across the world to power stunning websites.">We are trusted by over 25,000 clients across the world to power stunning websites.</span>
    </div>
</div>

LESS

.text-caruisel{
    overflow: hidden;
    pointer-events: none;
    margin-top: 70px;

    .text-caruisel--cont{
        position: relative;
        float: left;
        z-index: 0;
        pointer-events: none;
    }
    span{
        display: block;
        font-size: 100px;
        font-weight: 600;
        animation: content-marquee 15s infinite linear;
        white-space: nowrap;
        padding-left: 2vw;

        @keyframes content-marquee {
            0% {
                transform: translateX(0)
            }
            100% {
                transform: translateX(-50%)
            }
        }
        &::after{
            content: attr(data-text);
            padding-left: 2vw;
        }
    }
}