CSS3動畫——animation

　　能夠讓頁面中指定的元素按照設定的方式「動」起來，運用的是人視覺延遲的原理，連續地在上一張圖消失以前插入下一張

animation屬性值

1.animation-name

　　對象的動畫名稱，以便後續設置動畫屬性時使用

　　默認爲none，若是設置的話即爲要設置動畫的關鍵幀的名字

　　後續對該元素設置動畫時，要用@keyframes，設置起始的樣式（from）和終止的樣式（to）

 2.animation-duration

　　動畫持續的時間（播放完成所花時間）

　　默認值爲0，可設置單位爲秒（s）或毫秒（ms）

3.animation-timing-function

　　動畫的過分方式

　　經常使用的有：linear（線性過渡）、ease（平滑過渡）、ease-in（由慢到快）、ease-out（由快到慢）、ease-in-out（由慢到快再到慢）

　　若有複雜需求，要設置貝塞爾曲線（cubic-bezier（數值1，數值2，數值3，數值4）），其中四個數值範圍爲0-1

4.animation-delay

　　動畫開始前等待時間（該時間不包括在動畫放映時間內）

　　默認值爲0，可設置單位爲秒（s）或毫秒（ms），如設置負值則當即開始動畫

　　注：設置的時間帶有小數點時，建議省去整數部分，如0.5寫成.5

5.animation-interation-count

　　動畫循環次數

　　值爲數字，默認爲1，也可設置infinite（無限循環）

6.ainmation-direction

　　動畫循環時的方向

　　可設置的值有：none（保留原有樣式，默認值）、reverse（反向）、alternate（先正常再反向並交替進行）、alternate-reverse（先反向再正常並交替進行）

　　其中alternate和alternate-reverse必須在循環次數不爲1時才生效

7.animation-fill-mode

　　動畫不播放（已經放完/有延遲沒播放）時的元素樣式

　　可設置的值有：none（沒有樣式，默認值）、forwards（結束時狀態）、backwards（開始時狀態）、both（同時設置開始和結束時狀態）

8.animation-play-state

　　動畫狀態，即播放/暫停

　　可設置的值有：running（播放，默認值）、pause（暫停）

9.animation的簡寫

　　其中必須設置name和duration

　　解析時，默認把第一個字符串屬性值解析爲name，第一個帶有時間的屬性值解析爲duration，以後一個帶有時間的屬性值解析爲delay

 /*按照每一個元素來寫的動畫屬性*/
 1 div{
 2     width:100px;height:100px;
 3     animation-name:outside;
 4     animation-duration:2s;        
 5     animation-timing-function:linear;
 6     animation-delay:1s;
 7     animation-iteration-count:infinite;
 8     animation-direction:alternate-reverse;
 9     animation-fill-mode:forwards;
10     animation-play-state:pause;
11 }
12 @keyframes outside{
13     from{transform:translateY(0px);}
14     to{transform:translateY(1000px);}
15 }

 

keyframes

　　經過控制關鍵幀來改變更畫的播放效果，對手機端必須加上-webkit-

　　其中0%和100%可用from和to代替

 1 div{
 2     width:100px;height:100px;background:black;
 3     animation:here 5s linear infinite alternate-reverse;
 4 }
 5 @-webkit-keyframes here{
 6        0% {capacity:0;}
 7      25% {capacity:0.25;}
 8      50% {capacity:0.5;}
 9      75% {capacity:0.75;}
10     100% {capacity:1;}
11 }