CSS3动画实现背景滚动

在上一个模仿微信打飞机的游戏中，在敌机掉落下来时，如果背景图片也可以一直无穷滚动的话，那么效果就会更好。
现在就是要利用CSS3来实现一张图片的无穷滚动。

首先了解一下CSS3的动画属性：
①.animation-name:
用于将动画（@keyframes 语法）附加到元素上；
②. animation-duration:
定义动画完成一次迭代（从0%到100%）所花的时间；
③. animation-timing-function:
类似于transition-timing-function属性，
用来更细粒度的控制动画的速度。
取值有: ease\ linear\ ease-in\ ease-out\ ease-in-out 之一
④.animation-iteration-count:
此属性用来定义动画要执行多少次。infinite无限次
⑤. animation-direction:
当动画迭代时，可以使用具有alternate的 animation- direction属性来使其他迭代反向播放动画。 默认normal；
⑥. animation-delay:
在开始执行动画时的延迟
⑦. animation-fill-mode:
取值有：none、forwards、backwards、both
定义在动画开始之前或者结束之后发生的动作
⑧. animation-play-state:
定义动画运行还是暂停

当上面的太复杂时，还可以简写animation属性:

-供应商前缀-animation: ‘自定义动画名’ 30ms ease-in 1 alternate 5s backwords;

再对照上面的属性来看一下。这些顺序不可以颠倒

下来就是实战了。定义一个背景图片，使其无限滚动

#background{
        position: absolute;
        width: 300px;
        height: 500px;
        background:url(../images/background.jpg);
        z-index:1;
        -webkit-animation-name: flymove;
        -webkit-animation-duration: 10s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: 20000;

        -moz-animation-name: flymove;
        -moz-animation-duration: 10s;
        -moz-animation-timing-function: linear;
        -moz-animation-iteration-count: 20000;

        -ms-animation-name: flymove;
        -ms-animation-duration: 10s;
        -ms-animation-timing-function: linear;
        -ms-animation-iteration-count: 20000;
    }

     @-webkit-keyframes flymove{
            0%{background-position:0px 0px;}
            100%{background-position:0px 500px;}
        }
        @-moz-keyframes flymove{
           0%{background-position:0px 0px;}
            100%{background-position:0px 500px;}
        }
        @-ms-keyframes flymove{
          0%{background-position:0px 0px;}
            100%{background-position:0px 500px;}
        }

body中就只有一个canvas元素

<canvas id = "background">
canvas>

向上面这样就可以实现背景图片无限滚动了。上面每一个都添加了三个供应商的前缀，我们可以简写将#background中的十二行代码写成三行：

#background{
        position: absolute;
        width: 300px;
        height: 500px;
        background:url(../images/background.jpg);
        z-index:1;
        -webkit-animation: 'flymove' 10s linear 20000;
        -moz-animation: 'flymove' 10s linear 20000;
        -ms-animation: 'flymove' 10s linear 20000;
}

这样就简单多了。
自己也写一个可以滚动的图片吧！