jQuery 动画背景图像超时上下浮动效果

Question

I have this element with background images:

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;

Now I want the planets (every picture except the first one) to move a little bit up, then down. (Float effect).

In jQuery I created a setInterval so I have a loop every 2s. Inside I tried to change the background position. It works if I put

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

But this just blinks the planets in 2 sec.

Then I tried:

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

But nothing happened.

How can I achieve the hover effect up/down ? Here is the 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>