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代码无关，如果问题是你可以创建一个使用脚本的演示吗？

显示线性背景Img动画无瑕疵

1 个答案: