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;
}

這樣就簡單多了。
自己也寫一個可以滾動的圖片吧！