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