How to create infinite marquee without space between animations?

Need to realize infinite vertical slider with moving slides and without empty space between animations. I using Vanilla js.

Full code with example: https://jsfiddle.net/s5u8egh0/4/

I have this structure:

<div class="main-wrapper">
  <div class="animationDiv">
    <a href="https://google.com" class="slot"> Some content </a>
  </div>
</div>

"a" tags - it's slides which I need to move.

Animation realized on css:

@keyframes slider {
  0% {
    top: 0;
  }
  100% {
    top: -570px;
  }
}

Need to remove space after animations (from example, between 1 and 3 slide I have a space)? And How I can stop all animations after hover on slide?