Infinite horizontal animation starting from center

Question

I have a background (cloud) and I want to animate it horizontally. If I start the animation from the left most position then the animtion is smooth but if I start the animation from the center the it becomes abrupt.

I know why is it behaving so but not getting a clue on how to make it smooth.

See the abrupt on when starting from the middle:

.trt-clouds-1 {
  width: 100vw;
  height: 200px;
  background-image: url('https://image.flaticon.com/icons/svg/414/414927.svg');
  background-repeat: no-repeat;
  background-size: 10vw;
  animation: animatedBackground 4s linear infinite;
}

@keyframes animatedBackground {
  from {
    background-position: 30vw 0;
  }
  to {
    background-position: 100vw 0;
  }
}

<div class="trt-clouds-1"></div>

Ideally, it should start from the center, then should go to the rightmost point and then should come out from the leftmost point and continue to reach to the center.

Answer 1

Solution 1: Not amazing

By your definition of "smooth" (i.e., going out the right and coming out the left), you can add additional breakpoints. Just make sure to set the percentage timings correct so that it is travelling the same speed before and after reaching the right edge.

If you make the jump between right edge and left edge fast enough, it should show smoothly.

body, html {
  overflow: hidden;
}

.trt-clouds-1 {
  width: 100vw;
  height: 200px;
  background-image: url('https://image.flaticon.com/icons/svg/414/414927.svg');
  background-repeat: no-repeat;
  background-size: 10vw;
  animation: animatedBackground 4s linear infinite;
}

@keyframes animatedBackground {
  0% {
    background-position: 30vw 0;
  }
  63.6% {
    background-position: 100vw 0;
  }
  63.6000001% {
    background-position: -10vw 0;
  }
  100% {
    background-position: 30vw 0;
  }
}

<div class="trt-clouds-1"></div>

(The animation travels 110vw total: 70 to the right, and 40 on the way back. To make it smooth, the animation spends 7/11 (63.6%) of the way going there, and the rest coming back, hence the timings.)

---

Solution 2: Pretty elegant

A second, more elegant option would be to use the animation-delay property with a negative start value. (This doesn't start at exactly 30vw, but you get the point).

html, body {
  overflow: hidden;
}

.trt-clouds-1 {
  width: 100vw;
  height: 200px;
  background-image: url('https://image.flaticon.com/icons/svg/414/414927.svg');
  background-repeat: no-repeat;
  background-size: 10vw;
  animation: animatedBackground 4s linear infinite;
  animation-delay: -2s;
}

@keyframes animatedBackground {
  0% {
    background-position: -10vw 0;
  }
  100% {
    background-position: 100vw 0;
  }
}

<div class="trt-clouds-1"></div>