CSS3 - Slider infinito

Código para que sus imagenes se muevan de derecha a izquierda infinitamente y sin espacios en blanco. Muy similar a Marquee, pero mucho mejor.

HTML5

<!------------- LOGOS SLIDE ------------->

  <div class="logos">

    <div class="logos-slide">

      <a href="https://xviewplus.com/" target="_blank"><img src="img/xview logo.jpg" /></a>

      <a href="https://www.paramountplus.com/home/" target="_blank"><img src="img/paramountplus logo.jpg" /></a>

      <a href="https://www.netflix.com/browse" target="_blank"><img src="img/netflix logo.jpg" /></a>

      <a href="https://play.max.com/home" target="_blank"><img src="img/hbo max logo.jpg" /></a>

      <a href="p/soccer.html"><img src="img/soccer logo.jpg" /></a>

      <a href="p/dinosaurios.html"><img src="img/jurassic park logo.jpg" /></a>

      <a href="p/zoo.html"><img src="img/zoo logo mk.jpg" /></a>

      <a href="https://www.youtube.com/" target="_blank"><img src="img/btn_youtube.jpg" /></a>

    </div>

<div class="logos-slide">

<a href="https://xviewplus.com/" target="_blank"><img src="img/xview logo.jpg" /></a>

<a href="https://www.paramountplus.com/home/" target="_blank"><img src="img/paramountplus logo.jpg" /></a>

<a href="https://www.netflix.com/browse" target="_blank"><img src="img/netflix logo.jpg" /></a>

<a href="https://play.max.com/home" target="_blank"><img src="img/hbo max logo.jpg" /></a>

<a href="p/soccer.html"><img src="img/soccer logo.jpg" /></a>

<a href="p/dinosaurios.html"><img src="img/jurassic park logo.jpg" /></a>

<a href="p/zoo.html"><img src="img/zoo logo mk.jpg" /></a>

<a href="https://www.youtube.com/" target="_blank"><img src="img/btn_youtube.jpg" /></a>

</div>

  </div>

CSS3

/************ CARRUSEL ************/

@keyframes slide {

    from {

      transform: translateX(0);

    }

    to {

      transform: translateX(-100.25%);

    }

  }

  .logos {

    overflow: hidden;

    padding: 60px 0;

    background: white;

    white-space: nowrap;

    position: relative;

  }

  .logos:before,

  .logos:after {

    position: absolute;

    top: 0;

    width: 250px;

    height: 100%;

    content: "";

    z-index: 2;

  }

  .logos:before {

    left: 0;

    background: linear-gradient(to left, rgba(255, 255, 255, 0), white);

  }

  .logos:after {

    right: 0;

    background: linear-gradient(to right, rgba(255, 255, 255, 0), white);

  }

  .logos:hover .logos-slide {

    animation-play-state: paused;

  }

  .logos-slide {

    display: inline-block;

    animation: 22s slide infinite linear;

  }

  .logos-slide img {

    height: 200px;

    margin: 0 40px;

    cursor: pointer;

  }