移动无限使用CSS多背景(Move multiple backgrounds infinitely

我有两个背景：

body {
    background-image: url(img/nemo.png),url(img/ocean.png);
}

如何使nemo.png background从左向右移动无限，但不影响ocean.png background ？

编辑：当他到达最右边缘（与图像不再可见），他将再次出现在左边，并开始做从漂流左到右。

Answer 1:

这可以用纯CSS 3，如进行关键帧动画 ：

演示： http://jsfiddle.net/dghsV/112

body {
    background-image: url("http://www.animaatjes.nl/disney-plaatjes/disney-plaatjes/finding-nemo/nemo11.gif"), url("http://images2.layoutsparks.com/1/200022/ocean-dreams-blue-waves.jpg");
    background-repeat: no-repeat;
    background-position: 50% 0%, 0;
    -moz-animation: swim 2s linear 0s infinite;
    -webkit-animation: swim 2s linear 0s infinite;
    animation: swim 2s linear 0s infinite;
}
@-moz-keyframes swim {
    from { background-position: 200% 0, 0 0; }
    to  { background-position: -100% 0, 0 0; }
}
@-webkit-keyframes swim {
    from { background-position: 200% 0, 0 0; }
    to  { background-position: -100% 0, 0 0; }
}
@keyframes swim {
    from { background-position: 200% 0, 0 0; }
    to  { background-position: -100% 0, 0 0; }
}

句法

animation ： animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction ;

该功能是实验性的，所以供应商的前缀（例如-webkit- ）必须被添加（见能否使用CSS3动画的兼容性说明）。 在我的演示中，我使用的所有属性，除了最后一个。

Answer 2:

这里有一个选项：

创建从动画GIF nemo.png其是从图像左边移动到右边的一个简单的动画。

然后通过设置创建分层的背景ocean.png的背景body您的网页。

然后创建一个div与下面的CSS：

width:100%; 
height:100%;
background-position:center center;
background-image: url(img/moving-nemo.gif);

该div将成为您的所有内容，这将给你一个分层的背景效果一个包罗万象的容器。

Answer 3:

仅使海洋的背景和创建尼莫作为背景一个div：

<div id="nemo"></div>

#nemo {
    background: url(nemo.png) no-repeat;
    width: 100px;
    height: 100px;
    position:absolute;
    left: 0px;
    top: 500px;
    z-index:-10;
}

比你可以激活这个div与JavaScript（jQuery的）：

<script type="text/javascript">
    $(document).ready(function() {
        SwimRight();
    });

//duration is in ms
function SwimRight() {
     $('#nemo').css({positionLeft: 0});
     $('#nemo').animate(
          { left: $(document).width() },
          { duration: 5000,
          easing: normal,
          queue: true, 
          complete: SwimRight}
     );
</script>

文章来源: Move multiple backgrounds infinitely using CSS