css 運動背景

css 運動背景
原理：

animation-name: bgmove;
animation-duration: 100s;animation-timing-function: linear;animation-delay: 0;animation-iteration-count: infinite; 

animation介紹：

屬性	描述
animation	指定定義所有動畫屬性（除了 animation-play-state 外）的速記值。
animation-delay	指定顯示動畫前動畫迴圈內的位移（從迴圈開始的時間量）。 此屬性值應採用秒作為單位（後面附加“s”—例如 animation-delay: 2s;）
animation-direction	指定動畫迴圈的播放方向。 將 animation-direction 設定為“正常”""，動畫將按預期執行（從屬性值 0% 到 100% 執行動畫）。將其設定為“反向”""將實現反效果。在多重迭代設定中，值“交替”""和“反向交替”""將導致動畫在“正常”""和“反向”""模式間交 替。
animation-duration	指定完成一個動畫迴圈的時間長度。此屬性值應採用秒作為單位（後面附加“s”，例如 animation-duration: 2s;）
animation-fill-mode	指定在動畫開始播放之前或結束播放之後，動畫效果是否可見。此屬性定義應用於動畫結束時的元素的 CSS 屬性。如果將該屬性設定為“無”""（初始值），則動畫元素將在動畫完成後返回到其原始樣式屬性。將此屬性設定為“向前”""值，表示在動畫結束時應用動 畫的最後值（在“to”或“100%”主要畫面格中指定的值）。
animation-iteration-count	定義動畫迴圈的播放次數。將此屬性設定為“無限”""，將無限期地運行動畫。
animation-name	指定一個或多個動畫名稱。動畫名稱標識或選擇 CSS @keyframes At-Rule。
animation-play-state	指定動畫是播放還是暫停。使用此屬性，你可以通過將該屬性值設定為“已暫停”""來暫停動畫，通過將其設定為“正在運行”""來恢複動畫。請注意將 已結束的動畫的 animation-play-state 重設為“正在運行”""，不會重新啟動動畫。若要重新啟動動畫，則必須將其重新添加到元素。
animation-timing-function	指定動畫的單次迴圈期間要使用的中間屬性值。

 

body{display: block;       background: url('test.png') 5px 5px,url("test.png") 1050px 750px,url("test.png") 1000px -50px;     -moz-animation-name: bgmove;     -moz-animation-duration: 100s;     -moz-animation-timing-function: linear;     -moz-animation-delay: 0;     -moz-animation-iteration-count: infinite;     -webkit-animation-name: bgmove;     -webkit-animation-duration: 100s;     -webkit-animation-timing-function: linear;     -webkit-animation-delay: 0;     -webkit-animation-iteration-count: infinite;     animation-name: bgmove;     animation-duration: 100s;     animation-timing-function: linear;     animation-delay: 0;     animation-iteration-count: infinite; }@-moz-keyframes bgmove{    0%{    background:url('test.png') 5px 5px,        url("test.png") 1050px 750px,        url("test.png") 1000px -50px;}100%{    background:url('test.png') 2005px 1005px,        url("test.png") 50px -250px,        url("test.png") 0 950px;}}@-webkit-keyframes bgmove{    0%{    background:url('test.png') 5px 5px,        url("test.png") 1050px 750px,        url("test.png") 1000px -50px;}100%{    background:url('test.png') 2005px 1005px,        url("test.png") 50px -250px,        url("test.png") 0 950px;}}