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 }