显示没有斩波的线性背景Img动画

Question

我的站点上有两个部分，第一个使用background X，第二个使用background Y。

第一部分有一个动画背景。它看起来像这样：

body {
  margin:0;
  padding:0;
  background: #2980b9 url('http://static.tumblr.com/03fbbc566b081016810402488936fbae/pqpk3dn/MRSmlzpj3/tumblr_static_bg3.png') repeat 0 0;
  -webkit-animation: 10s linear 0s normal none infinite animate;
  -moz-animation: 10s linear 0s normal none infinite animate;
  -ms-animation: 10s linear 0s normal none infinite animate;
  -o-animation: 10s linear 0s normal none infinite animate;
  animation: 10s linear 0s normal none infinite animate;
  animation-direction: reverse;
}
@-webkit-keyframes animate {
  from {background-position:0 0;}
  to {background-position: -512px 0;}
}
@-moz-keyframes animate {
  from {background-position:0 0;}
  to {background-position: -512px 0;}
}
@-ms-keyframes animate {
  from {background-position:0 0;}
  to {background-position: -512px 0;}
}
@-o-keyframes animate {
  from {background-position:0 0;}
  to {background-position: -512px 0;}
}
@keyframes animate {
  from {background-position:0 0;}
  to {background-position: -512px 0;}
}

一旦调用了一个事件，IE从第1节转到第2节，一些jQuery就会修改背景图像，反转方向，并很好地将其转换为：

function redrawBackground(image) {
  $('body').css({
    "background": "url(" + image + ")",
    "background-size": "cover",
    "background-repeat": "repeat-x",
    "animation-direction": "normal",
    "-webkit-transition": 'all .8s ease',
    "-moz-transition": 'all .8s ease',
    "-ms-transition": 'all .8s ease',
    "-o-transition": 'all .8s ease',
    "transition": 'all .8s ease'
  })
}

现在，我注意到部分背景图像有一个波折的问题。我希望从图像的结尾无缝过渡，因为它在自己身上重复。我目前注意到，当背景图像完成滚动并重新开始时，有一个显著的、明显的变化。

有没有关于无缝背景动画过渡的建议？

更新：附加信息：背景IMG#1的宽度为500px。背景IMG#2的宽度为512px。两者都具有background-size: cover;和background-repeat: repeat-x; 的CSS属性

将动画关键帧从500px动态更改为512px可能是明智的，但我主要关心的是第二个背景图像的明显起伏。背景并没有完全无缝地从图像的结尾过渡到图像本身的开头。

Answer 1

您提供的图像宽度为500px，因此将动画中的background-position设置为-500px而不是-512px应该可以解决抖动问题。

现在，这与您的javascript代码无关，如果这是问题所在，您可以使用脚本创建一个演示吗？