Javascript 具有多个背景图像的动画

我正在尝试为我的多个背景图像创建一些动画

我有这个CSS代码：

header {
background-image: url('/img/cloud2.png'), url('/img/cloud3.png'), url('/img/cloud1.png'), url('/img/cloud4.png');
background-position: left bottom, 20% 40%, 40% bottom, right 85%;
background-repeat: no-repeat;
}

我只想让云在一个无限的循环中移动。以下是我的JavaScript代码：

  $('header').animate({
    'background-position-x': '10%, 3%, 5%, 7%'
  }, 500, 'linear');

---

问题是这不起作用。它只在我只写一个background-position-x值时起作用。但在这种情况下，所有云都从相同的x值开始。

看起来您在css中使用的是

背景位置

，在jquery中使用的是

背景位置-x

。为什么不尝试使用jquery将

背景位置重置为所需的值？
谢谢提示。虽然，当我尝试用jquery重置背景位置时，如下所示：
$（'header'）.animate（{'background position'：'right bottom，70%70%，80%80%，90%90%'），500，'linear'）所有背景图像向前移动到提到的第一个位置（右下）。我想做的是将每个背景图像移动到不同的位置…您能创建一个JSFIDLE来解决您的具体问题吗，然后我可能会帮助您？是的，对不起！：）它在这里，虽然它不动（我不知道为什么…）。我想做的是将每一朵云移动到不同的位置。。。