EDIT
Como o autor mudou a definição do que realmente ele precisava fiz esse outro exemplo tentando simular o looping
do slider. Mas para isso eu precisei "clonar" na mão os últimos itens do conteúdo. A ideia aqui é que quando a animação fizer o loop
o conteúdo do final é igual ao do início, assim o usuário não percebe o loop
Veja como ficou no exemplo.
.container {
width: 200px;
height: 220px;
background-color: #ddd;
display: flex;
flex-wrap: wrap;
position: relative;
border: 1px solid;
overflow: hidden;
}
.slider {
background-color: #ddd;
display: flex;
flex-wrap: wrap;
animation: anima 4s infinite linear;
position: relative;
}
.logo {
margin: 10px;
width: 80px;
height: 80px;
background-color: #333;
}
@keyframes anima {
10% {
transform: translateY(0);
}
100% {
/* 180px e a altura do container descontando as margens pode ser que vc tenha que ajustar esse tamanho dependo da altura do seu container */
transform: translateY(calc(-100% + -180px));
}
}
<div class="container">
<div class="slider">
<div class="logo">
<img src="https://unsplash.it/81/80" alt="">
</div>
<div class="logo">
<img src="https://unsplash.it/80/80" alt="">
</div>
<div class="logo">
<img src="https://unsplash.it/80/80" alt="">
</div>
<div class="logo">
<img src="https://unsplash.it/80/80" alt="">
</div>
<div class="logo">
<img src="https://unsplash.it/80/80" alt="">
</div>
<div class="logo">
<img src="https://unsplash.it/80/80" alt="">
</div>
<div class="logo">
<img src="https://unsplash.it/80/80" alt="">
</div>
<div class="logo">
<img src="https://unsplash.it/80/80" alt="">
</div>
<!-- clones para fazer o looping -->
<div class="logo">
<img src="https://unsplash.it/81/80" alt="">
</div>
<div class="logo">
<img src="https://unsplash.it/80/80" alt="">
</div>
<div class="logo">
<img src="https://unsplash.it/80/80" alt="">
</div>
<div class="logo">
<img src="https://unsplash.it/80/80" alt="">
</div>
<div class="logo">
<img src="https://unsplash.it/80/80" alt="">
</div>
<div class="logo">
<img src="https://unsplash.it/80/80" alt="">
</div>
</div>
</div>
Opção idêntica a do site que o autor da pergunta tinha solicitado anteriormente
Segue um modelo feito apenas com CSS. A ideia aqui é que eu um .container
que dentro dele tem um outro container chamado .slider
, esse por sua vez tem dentro dele todas as logos. Agora basta vc fazer o .slider
mover para cima 100% da própria altura, para isso eu usei transform:translateY(calc(-100% + a altura do .container))
assim o .slider
sobe todo, mas não deixa o .conteiner vazio...
Lógica aplicada:

Para entender melhor veja o código:
(deixei uns comments no CSS, leia!)
OBS: A única ressalva fica para quanto mais itens vc tiver dentro do slider, mais rápido ele vai passar. Explico: Se o Slide tem 100px de altura e tem 10s para percorrer a própria altura ele desloca 10px por Segundo. Agora se ele tiver 200px de altura em 10s ele vai deslocar agora 20px por Segundo, logo ele vai passar a animação mais rápido. Para corrigir isso basta vc aumentar o tempo da animação de 10s para 20s :D
.container {
width: 200px;
height: 220px;
background-color: #ddd;
display: flex;
flex-wrap: wrap;
position: relative;
border: 1px solid;
overflow: hidden;
}
.slider {
position: absolute;
display: flex;
flex-wrap: wrap;
transform: translateY(0);
animation: anima 6s infinite alternate linear;
}
.logo {
margin: 10px;
width: 80px;
height: 80px;
}
@keyframes anima {
10% {
transform: translateY(0);
}
20% {
/* aqui eu repito a propriedade para deixar o slide para um tempo antes de rodar */
transform: translateY(0);
}
90% {
/* aqui o slide sobe 100% da própria altura, menos a altura do container */
transform: translateY(calc(-100% + 220px));
}
100% {
transform: translateY(calc(-100% + 220px));
}
}
<div class="container">
<div class="slider">
<div class="logo">
<img src="https://unsplash.it/80/81" alt="">
</div>
<div class="logo">
<img src="https://unsplash.it/81/80" alt="">
</div>
<div class="logo">
<img src="https://unsplash.it/80/80" alt="">
</div>
<div class="logo">
<img src="https://unsplash.it/81/80" alt="">
</div>
<div class="logo">
<img src="https://unsplash.it/80/80" alt="">
</div>
<div class="logo">
<img src="https://unsplash.it/80/81" alt="">
</div>
<div class="logo">
<img src="https://unsplash.it/81/80" alt="">
</div>
<div class="logo">
<img src="https://unsplash.it/80/80" alt="">
</div>
<div class="logo">
<img src="https://unsplash.it/80/81" alt="">
</div>
</div>
</div>