CSS Анимации картинок

Рейтинг: 0Ответов: 1Опубликовано: 06.07.2023

У меня есть такой код:

#photo {
  bottom: 15%;
  position: absolute;
  -webkit-animation: linear infinite;
  -webkit-animation-name: run;
  -webkit-animation-duration: 5s;
}

@-webkit-keyframes run {
  0% {
    left: calc(100% - 100px);
  }
  100% {
    left: 0;
  }
}
<div id="photo">
  <img src="https://i.imgur.com/j0kovum.jpg" width=100px height=100px>
</div>

Данный css код двигает картинку справа налево. Моя необходимость в том чтобы добавить несколько картинок, и они крутились как бы сказать "по кругу" в одну линию, это значит чтобы когда они спавнились за экраном справа они шли до левой части экрана и уходили за него а потом опять появлялись справа, и это бы создавало "гладкую" прокрутку. У меня не получилось этого сделать, всё просто ломалось.

Ответы

▲ 0Принят

#photo {
  bottom: 15%;
  display: flex;
  position: fixed;
  -webkit-animation: linear infinite;
  -webkit-animation-name: run;
  -webkit-animation-duration: 5s;
}
@-webkit-keyframes run {
  0% {
    left: calc(100%);
  }
  100% {
    left: -330px;
  }
}
img {
    padding-right: 10px;
}
<div id="photo">
  <img src="https://i.imgur.com/j0kovum.jpg" width="100px" height="100px">
  <img src="https://i.imgur.com/j0kovum.jpg" width="100px" height="100px">
  <img src="https://i.imgur.com/j0kovum.jpg" width="100px" height="100px">
</div>
330px - общая ширина <div id="photo">