Trying to make a CSS3 diagonal slide animation, but it's not working as expected

Question

So I'm trying to create a diagonal scroll in CSS3, but I'm having no luck. The original script is this: https://codepen.io/275845/pen/LoYBjg

  <style>
    .tech-slideshow {
      height: 600px;
      max-width: 800px;
      margin: 0 auto;
      position: relative;
      overflow: hidden;
      transform: translate3d(0, 0, 0);
    }

    .tech-slideshow > div {
      height: 100px;
      width: 2526px;
      background: url(https://i2.wp.com/mitmark.com.br/wp-content/uploads/2016/04/circle.png?ssl=1);
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      transform: translate3d(0, 0, 0);
    }
    .tech-slideshow .mover-1 {
      animation: moveSlideshow 12s linear infinite;
    }
    .tech-slideshow .mover-2 {
      opacity: 0;
      transition: opacity 0.5s ease-out;
      background-position: 0 -200px;
      animation: moveSlideshow 15s linear infinite;
    }


    @keyframes moveSlideshow {
      100% { 
        transform: translateX(-66.6666%);  
      }
    }
    </style>
<div class="tech-slideshow">
      <div class="mover-1"></div>
      <div class="mover-2"></div>
    </div>

Here's what I've tried so far, with no success: https://codepen.io/275845/pen/gJOjXY

<style>
.tech-slideshow {
  height: 600px;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}
.tech-slideshow > div {
  height: 100px;
  width: 2526px;
  background: url(https://i2.wp.com/mitmark.com.br/wp-content/uploads/2016/04/circle.png?ssl=1);
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  transform: translate3d(0, 0, 0);
}
.tech-slideshow .mover-1 {
  animation: moveSlideshow 2s linear infinite;
}
.tech-slideshow .mover-2 {
  opacity: 0;
  transition: opacity 0.5s ease-out;
  background-position: 0 -200px;
  animation: moveSlideshow 5s linear infinite;
}
@keyframes moveSlideshow {
   0% {
        transform: translatex(0px) translatey(0px)
    }
    100% {
        transform: translatex(100px) translatey(100px);
    }
}
</style>

And here's the result that I'm trying to achieve: https://streamable.com/ltsba

As you can see, I'm trying to make a diagonal slide scrolling in css3, but of course, if anyone could point me out another solution weather it's vanilla javascript, or even jQuery, I'm opened for new suggestions.

Answer 1

You're pretty close, just a few issues.

1. You don't need 2 "mover", one is enough.
2. Make it big! And background repeat!
3. Then you move the size of that background image.

.tech-slideshow > div {
  height: 3000px;  // BIG
  width: 3000px;
  background: url(https://i2.wp.com/mitmark.com.br/wp-content/uploads/2016/04/circle.png?ssl=1);
  position: absolute;
  bottom: 0;. // position
  right: 0;
  animation: moveSlideshow 5s linear infinite;
}

@keyframes moveSlideshow {
    0% {
        transform: translatex(0px) translatey(0px);
    }
    100% {
        transform: translatex(255px) translatey(255px);  // move size of image
    }
}