jQuery одушевлённое фоновое изображение на эффекте таймаута вверх-вниз

Question

У меня есть этот элемент с фоновыми изображениями:

background-image: url(../img/Icons/about-stars-bg2.svg),
  url(../img/about-planet-1.svg), 
  url(../img/about-planet-2.svg),
  url(../img/about-planet-3.svg);
background-position: top 5px center, -115px 200px, left 1055px top 450px,
  right -45px top 350px;
background-repeat: no-repeat;
background-size: auto, auto, auto, 100px;

Теперь я хочу, чтобы планеты (каждая картинка, кроме первой) двигались немного вверх, а затем вниз. (Эффект с плавающей запятой).

В jQuery я создал setInterval , поэтому у меня есть al oop каждые 2 с. Внутри я попытался изменить положение фона. Это работает, если я поставлю

.css('background-position','top 5px center, -155px 200px, left 1255px top 250px, right -15px top 350px');

Но это просто мигает планет в 2 се c.

Тогда я попытался:

$('.header').animate({backgroundPosition: '(0px -400px)'}, 1000 );// space here

Но ничего не произошло.

Как мне добиться эффекта наведения вверх / вниз? Вот это jQuery:

// Move planets up down
$(document).ready(function(){
  var i = 0;
  setInterval(function(){

    //JUST BLINKS, CHANGES LOCATION
    //$('.header').css('background-position','top 5px center, -155px 200px, left 1255px top 250px, right -15px top 350px');

    //DOESN'T WORK
    $('.header').animate({backgroundPosition: '(0px -400px)'}, 1000 );

    i++;    
  },2000);   
});

Answer 1

#planets {
  height: 90vh;
  
  background-image:
    url(//placehold.it/40x40/f0b),
    url(//placehold.it/40x40/0bf),
    url(//placehold.it/40x40/bf0),
    url(//placehold.it/40x40/0fb);
    
  background-position:
    50% 15%,
    25% 35%,
    10% 19%,
    80% 60%;
    
  background-repeat: no-repeat;
  background-size:
    3%,
    4%,
    5%,
    6%;
    
  animation: planets 1s 0.5s ease-in-out alternate infinite;
}

@keyframes planets {
  to {
    background-position:
      50% 45%,
      25% 65%,
      10% 69%,
      80% 20%;
  }
}

<div id="planets">


</div>