Как можно реализовать циклически движущийся фон. Адаптивный под все экраны | CSS

Question

У меня есть фон космоса со звездами. Цель заставить его бесконечно крутиться. Все это я реализовал с помощью css animate. Если все это делать в px то все хорошо. Но если все делать в относительных единицах и добавить background-size: contain то при окончании анимации картинка встает на старое положение и происходит прыжок что очень сильно заметно. Может быть у вас есть идеи как можно реализовать все в относительных единицах что бы на всех экранах смотрелось отлично.

@keyframes move {
    0% {
        transform: translate(0);
      }
    100% {
        transform: translate(-1926px); /* The image width */
    }
  }

.container {
    overflow: hidden;
}

* {
  margin: 0;
}

.bg {
 background: url("https://res.cloudinary.com/dhd2yhzej/image/upload/v1646047075/img_sveppk.jpg") repeat-x;
 background-size: contain;
 height: 100vh;
 width: 3852px;
 animation: move 5s infinite linear;
}

  <div class="container">
        <div class="bg"></div>
  </div>

https://codepen.io/kirillchaklidi/pen/gOXBGNm

Answer 1

Сделал чуть более быстрое смещение, чтобы видеть, что нет "дёрганий".
Но стоит учитывать, что так будет работать при условии "бесшовной" картинки.

body {margin: 0;}

.container {
  display: block;
  width: 100%;
  height: 100vh;
  background: url(//i.imgur.com/IdCl0le.png) repeat-x 0 0 / cover;
  animation: BGMOVING 5s linear infinite;
}

@keyframes BGMOVING {
  to {
    background-position: calc(100% - 100vw) 0;
  }
}

<div class="container"></div>

БЛОГ НА HUSL

Как можно реализовать циклически движущийся фон. Адаптивный под все экраны | CSS

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