Попытка сделать CSS3 анимацию по диагонали, но это не работает, как ожидалось

Question

Итак, я пытаюсь создать диагональную прокрутку в CSS3, но мне не везет.Оригинальный сценарий такой: 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>

Вот то, что я пробовал до сих пор, но безуспешно: 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>

И вот результат, который я 'я пытаюсь достичь: https://streamable.com/ltsba

Как вы можете видеть, я пытаюсь сделать диагональную прокрутку слайдов в css3, но, конечно, если кто-то может указать мне другое решение, если это ванильный JavaScript, илидаже jQuery, я открыт для новых предложений.

Answer 1

Вы довольно близки, всего несколько вопросов.

1. Вам не нужно 2 "движителя", достаточно одного.
2. Сделайте это большим!И фон повторяется!
3. Затем вы перемещаете размер этого фонового изображения.

.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
    }
}