css運動背景

愛六六發表於2012-12-24
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;
}
}

 


相關文章