JSFiddle - React, Tailwind, and code Playground

by Barry Grennan

HTML

<div class="slideContainer">
  <div class="slider">
    <div class="logo"></div>
    <div class="logo"></div>
    <div class="logo"></div>
    <div class="logo"></div>
    <div class="logo"></div>
    <div class="logo"></div>
    <div class="logo"></div>
    <div class="logo"></div>
    <div class="logo"></div>
    <div class="logo"></div>
    <div class="logo"></div>
    <div class="logo"></div>
    <div class="logo"></div>
    <div class="logo"></div>
  </div>
</div>

CSS

@keyframes slide {
  0% { transform: translateX(0); };
  100% { transform: translateX(calc(-250px * 7)); }
}
.slideContainer {
  height: 150px;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 100vw;
}
.slideContainer::before, .slideContainer::after {
    content: "";
    height: 150px;
    position: absolute;
    width: 20%;
    z-index: 2;
    background: linear-gradient(to right,  rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}
.slideContainer::after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}
.slideContainer::before {
  top: 0;
  left: 0;
}
.slider {
  animation-name: slide;
  animation-duration: 30s;
  animation-iteration-count: linear infinite;
  display: flex;
  width: calc(250px * 14); 
}
.logo {
  height: 160px;
  width: 160px;
  margin: 0 30px 0 30px;
  background-color: pink;
}