Бегущая строка на CSS но вместо текста картинка

Question

Всем привет, мне нужно сделать что то на подобии бегущей строки на CSS Но вместо текста будет картинка мне нужно вращать эту картинку в права на лево без каких либо пробелов Грубо говоря заРепитить ее, пытался сделать таким образом, но есть большой пробел справа

HTML

<div class="scroll_bg" id="scroll_bg">
<img src="../img/jpg/slide_0.png">
<img src="../img/jpg/image.jpg">
</div>

SASS

@keyframes scroll
    0%
        transform: translate(0, 0)
    
    100%
        transform: translate(-100%, 0)

.scroll_bg
    display: block
    width: 100%
    white-space: nowrap
    overflow: hidden
    
    img
        display: inline-block
        padding-left: 100%
        -webkit-animation: scroll 5s infinite linear
        -moz-animation: scroll 5s infinite linear
        animation: scroll 5s infinite linear

Answer 1

Если совсем через css - то можно вот так вот.

@keyframes scroll{
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(-100%, 0);
  }
}
.scroll_bg {
  display: block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
}
.img {
  display: inline-block;
  padding-left: 100%;
  -webkit-animation: scroll 5s infinite linear;
  -moz-animation: scroll 5s infinite linear;
  animation: scroll 5s infinite linear;
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/3/36/Hopetoun_falls.jpg/220px-Hopetoun_falls.jpg);
  width: 220px;
  height: 147px;
  margin-left: -5px;
}

<div class="scroll_bg" id="scroll_bg">
  <div class="img"></div>
  <div class="img"></div>
</div>

Answer 2

Ня =)

<marquee><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/36/Hopetoun_falls.jpg/220px-Hopetoun_falls.jpg"></marquee>

БЛОГ НА HUSL

Бегущая строка на CSS но вместо текста картинка

Ответы (2 шт):