在html5中移动标题图像时出现问题

Question

这是我的代码：

<header>
    <div id='animate-area'>
    </div>
  </header>

的CSS：

@keyframes animatedBackground {
      from { background-position: 0 0; }
      to { background-position: 100% 0; }
    }
    @-webkit-keyframes animatedBackground {
      from { background-position: 0 0; }
      to { background-position: 100% 0; }
    }
    @-moz-keyframes animatedBackground {
      from { background-position: 0 0; }
      to { background-position: 100% 0; }
    }
    #animate-area { 
      height: 145px;
      background-image: url(http://s10.postimg.org/noxw294zd/banner.png);
      animation: animatedBackground 40s linear infinite;
      -ms-animation: animatedBackground 40s linear infinite;
      -moz-animation: animatedBackground 40s linear infinite;
      -webkit-animation: animatedBackground 40s linear infinite;
    }

这是JsFIDDLE：http://jsfiddle.net/6d6xa65n/

运行此image-src =“img / banner.png”时，它将显示不同的输出。但是当我添加图像src =“http://s10.postimg.org/noxw294zd/banner.png”时，它会显示与实际输出不同的内容，在完成一次旋转后，需要从左侧开始。并且需要移除图像左侧和右侧的空间。

如何解决这个问题？有人可以帮助我吗？

这是我使用http://imgur.com/FDbmms0

的图片

Answer 1

如果我做对了，你需要做出这些改变：

删除额外空间：

body {
    margin: 0;
    padding: 0;
}

使图像来回旋转：

@keyframes animatedBackground {
  0% { background-position: 0 0; }
  50% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

见工作demo。

修改

我发现了这个article以及如何进行无限图像滚动的基础知识。但是我无法使其在相对宽度和高度上工作（所以作为他演示中技术的作者），所以我只相应地增加了原始宽度（1269px）。这是最后的css：

body {
    margin: 0;
    padding: 0;
}
#slideshow {
    position: relative;
    overflow: hidden;
    height: 100px;
}
#animate-area { 
    height: 100%;
    width: 2538px;
    position: absolute;
    left: 0;
    top: 0;

    background-image: url('http://s10.postimg.org/noxw294zd/banner.png');
    animation: animatedBackground 40s linear infinite;
    -ms-animation: animatedBackground 40s linear infinite;
    -moz-animation: animatedBackground 40s linear infinite;
    -webkit-animation: animatedBackground 40s linear infinite;
}
/* Put your css in here */
@keyframes animatedBackground {
    from { left: 0; }
    to { left: -1269px; }
}
@-webkit-keyframes animatedBackground {
    from { left: 0; }
    to { left: -1269px; }
}
@-moz-keyframes animatedBackground {
    from { left: 0; }
    to { left: -1269px; }
}

所以#animate-area是图像的两倍大，我们只是在完整图像大小上左移动画。查看更新的demo。