Карусель бесконечной прокрутки на CSS

Возможно, вы встречали бесконечную анимацию автопрокрутки на различных сайтах, например с логотипами. Эта анимация прокрутки выглядит очень неплохо. Возможно Ваш заказчик попросил сделать это, или Вы хотите сделать такую карусель на своём сайте.  Итак, давайте посмотрим, как мы можем это сделать:

<div class="brand-parent">
    <div class='brands brands-carousel' id="brands-carousel">
        <div class='slide-content'>
            <a href="your-brand.html">Brand 1</a>
        </div>
        <div class='slide-content'>
            <a href="your-brand.html">Brand 2</a>
        </div>
        <div class='slide-content'>
            <a href="your-brand.html">Brand 3</a>
        </div>
        <div class='slide-content'>
            <a href="your-brand.html">Brand 4</a>
        </div>
        <div class='slide-content'>
            <a href="your-brand.html">Brand 5</a>
        </div>
        <div class='slide-content'>
            <a href="your-brand.html">Brand 6</a>
        </div>
    </div>
    <div class='brands brands-carousel' id="brands-carousel2">
        <div class='slide-content'>
            <a href="your-brand.html">Brand 1</a>
        </div>
        <div class='slide-content'>
            <a href="your-brand.html">Brand 2</a>
        </div>
        <div class='slide-content'>
            <a href="your-brand.html">Brand 3</a>
        </div>
        <div class='slide-content'>
            <a href="your-brand.html">Brand 4</a>
        </div>
        <div class='slide-content'>
            <a href="your-brand.html">Brand 5</a>
        </div>
        <div class='slide-content'>
            <a href="your-brand.html">Brand 6</a>
        </div>			
    </div>
</div>

Создаётся родительский блок, у меня это “brand-parent”. Внутри него  два  блока с элементами карусели с одинаковым содержимым. Это сделано для того, чтобы подставлять второй блок после завершения прокрутки первого и наоборот. Если этого не сделать, то прокрутка будет прерываться и возобновляться опять. То есть появится пустой пробел. Чтобы этого не произошло и создаём два  блока с одинаковым содержимым.

Пишем стили для карусели:

.brand-parent {
    display: flex;
    display: -webkit-flex;
    flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
    align-items: center;
    -webkit-align-items: center;
}
.brands-carousel {
    height: 170px;
    display: flex;
    display: -webkit-flex;
    flex-wrap: nowrap;
    align-items: center;
    -webkit-align-items: center;
    animation: animate 30s linear infinite;
}
.brands-carousel .slide-content {
    height: 100%;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 170px;
}
.brands-carousel .slide-content a {
    height: 100%;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
    white-space: nowrap;
    color: #808080;
    text-transform: uppercase;
    padding: 20px;
    width: 100%;
    transition: all .3s ease-in-out 0s;
}
.brands-carousel .slide-content a:hover, .brands-carousel .slide-content a:active {
    box-shadow: 0 0 25px rgba(0,0,0,.15);
}

Все размеры блоков и параметры сможете настроить по своим требованиям.

Скорость прокрутки устанавливается в строке:

animation: animate 30s linear infinite;

Далее стили анимации:

@keyframes animate {
    0% {
        transform: translate3d(0, 0,0);
    }
    100% {
        transform: translate3d(-100%, 0, 0);
    }
}
@-webkit-keyframes animate {
    0% {
        transform: translate3d(0, 0,0);
    }
    100% {
        transform: translate3d(-100%, 0, 0);
    }
}

Если хотите остановить прокрутку при наведении курсора вставьте  эти строки в код стилей:

.brand-parent:hover .brands-carousel {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -ms-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
}

Если надо вставить логотипы в карусель, добавьте такой код стилей:

.brands-carousel .slide-content a img {
    display: inline-block;
    width: auto;
    max-width: 100%!important;
    height: auto;
    max-height: 95%;
    filter:	grayscale(100%);
    -webkit-filter: grayscale(100%);
    opacity: .5;
    transition: all .3s ease-in-out;
}
.brands-carousel .slide-content a:hover img, 
.brands-carousel .slide-content a:active img {
    filter:	grayscale(0);
    -webkit-filter: grayscale(0);
    opacity: 1;
}

Изображения логотипов в карусели будут чёрно-белые, а при наведении курсора будут плавно становиться цветными.

Рабочий фукнкционал приведённого примера можно увидеть здесь.