Javascript jQuery在超时时设置背景图像动画上下浮动效果

我有一个带有背景图像的元素：

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，因此每2秒就有一个循环。在里面，我试图改变背景位置。如果我把

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

但这只会使行星在2秒内闪烁

然后我试着：

$('.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);   
});

行星{ 高度：90vh； 背景图像： url（//placehold.it/40x40/f0b）， url（//placehold.it/40x40/0bf）， url（//placehold.it/40x40/bf0）， url（//placehold.it/40x40/0fb）； 背景位置： 50% 15%, 25% 35%, 10% 19%, 80% 60%; 背景重复：无重复； 背景尺寸： 3%, 4%, 5%, 6%; 动画：行星1秒0.5秒缓进缓出交替无限； } @关键帧行星{ 到{ 背景位置： 50% 45%, 25% 65%, 10% 69%, 80% 20%; } }