CSS動畫
功能：
css3中動畫分爲Animations功能和transitions功能
這兩個功能都可以通過改變css中的屬性值來產生動畫效果
1.Animations功能支持通過關鍵幀，指定來產生更復雜的頁面動畫效果
2.transitions功能支持一個屬性值平滑的國度到另一個屬性值
transitions功能
語法：
tranisitions:property duration timing-function delay;
property:表示要對那個屬性進行操作
duration：表示在多久的時間內完成屬性值的平滑過渡
timing-function：用何種方式來平滑過渡
delay：表示延遲多長的時間開始特效
定義過渡的屬性：
tranisition-property:屬性用來定義轉換動畫屬性的css屬性名稱
如： background-color屬性，
語法：
tranisition-property：none|all|[IDENT][','<IDENT>]*;
tranisition-property:
屬性的初始值爲all；適用於所有的元素以及before和after僞元素
none:表示沒有元素
all:表示針對所有的元素
ident:指定css屬性列表
定義過渡的時間：
transition-duration:
該屬性用來定義轉換動畫的時間長度
即，設置舊屬性換到新屬性所花費的時間，單位爲秒
語法：
transition-property:<time>[,<time>]*;
transition-duration:的初始化值爲0，適用於所有的元素以及before和after僞元素
默認的動畫過渡時間爲0秒
所以在指定元素動畫時，看不到過程，直接看到結果
定義過渡延遲的時間
語法和定義過渡時間一致
注意：
設置時間可以爲正整數、負整數、0，
非零時，必須設置時間單位爲s或者ms
負數時：過渡的動作會從該時間點開始顯示，之前的動作被截斷
整數數：過渡的動作會延遲觸發<time>[,<time>]*;
定義過渡的效果：
transition-timing-function屬性:用來定義過渡動畫的效果
起始值爲ease,使用與所有元素
說明：取值的特性
ease:緩解效果
linear：線型效果
ease-in:漸顯效果
ease-out：漸隱效果
ease-in-out:漸顯漸隱效果
cubic-bezier:特殊的立方貝塞爾曲線效果
注意：
瀏覽器的支持
ff4.0 opera10,safari3.1 chrome8 IE11以上版本
Animations功能及使用用法
1.概述：
我們在使用transitions實現動畫的時候只能指定要改變的屬性的開始值和結束值，在兩個值之間進行平滑的過渡的方式來實現動畫的效果，因此不能實現較爲複雜的動畫
而animations功能通過定義多個關鍵幀以及定義每一個關鍵幀中的元素的屬性值來實現更爲複雜的動畫效果
創建關鍵幀集合的方式：
1.@keyframe 關鍵幀的集合名（創建關鍵幀的代碼）
如：
40%{
本關鍵幀的樣式代碼
}
注意：
瀏覽器的支持：
ff20以上，opera18以上，Safari4以上，Chrome2，IE11以上都可以
定義動畫的名稱：
語法：
animation-name:none|IDENT[,none|IDENT]*;
animation-name屬性的初始值：none，使用與所有的塊狀元素和內聯元素
animation-name屬性定義了一個使用的動畫列表，每一個名字都可以用來選擇動畫關鍵幀，提供動畫屬性值
注意：
這個名字不符合任何一個定義的關鍵幀，那麼該動畫不執行
此外，如果動畫的名稱爲none，那麼同樣沒有動畫，該屬性可以用於覆蓋任何動畫
定義動畫的時間：
語法：
animation-duration:<time>[,<time>]*;
animation-duration屬性值初始化值爲0；使用與所有的塊狀元素和內聯元素
該屬性可以定義動畫循環的時間，在默認的情況下爲0，意味着沒有動畫，如果爲負值同樣沒有動畫
定義動畫的播放方式：
語法：
animation-timing-function:none|IDENT[,none|IDENT]*;
animation-timing-function屬性的取值：
可以參考transition-timing-function的取值
定義動畫的延時時間：
語法：
animation-delay：<time>[,<time>]*;
animation-delay:屬性的初始化值爲0，
該屬性可以定義動畫的開始時間，允許一個動畫開始執行一段時間後才被應用，當動畫的延時時間爲0時，意味着動畫立即執行，否則一定要指定動畫的延時執行時間
定義動畫的播放次數：
語法：
manimation-iteration-count:infinite|<number>[,infinte|<number>]*;
manimation-iteration-count屬性的起始值爲1，適用於所有的塊狀元素和內聯元素
該屬性可以定義動畫的執行次數，默認爲1，
如果取值爲非整數，將導致動畫結束一個週期的一部分
如果取值爲負數：將導致在交替週期內反向播放動畫
定義動畫播放的方向：
語法：
animation-direction:normal:reverse|alternate[,normal|alternate]* alternate-reverse;
animation-direction屬性值默認爲normal，適用於所有的塊狀元素和內聯元素
該屬性定義動畫播放的方向，取值包括兩個：
1.默認爲normal ：動畫的每一次循環都向前播放
2.alternate：表示第偶數次向前播放，第數次向反向播放動畫
設置動畫結束後的狀態：
animation-fill-mode:
none:默認值，不設置動畫之外的狀態，DOM未進行動畫前的狀態
forwards:設置動畫狀態爲動畫結束時的狀態，100%或to時，當設置animation-direcdtion屬性值爲reverse時，動畫結束後顯示爲keyframe第一幀
backwards:設置對象狀態爲開始狀態的動畫，測試顯示DOM未進行動畫前的一個狀態
both:設置對象狀態爲動畫結束或開始的狀態，結束時狀態優先播放。
設置動畫播放的狀態、：
animation-play-stats:running|paused
結合書寫的方式：
animation:keyframe的名稱 動畫執行的時長 動畫實現的方法 延時多少秒後執行動畫 設置動畫執行的次數 動畫執行的方向
實現動畫的方法animation-timing-function的值：
linear:在動畫開始時與結束時以同樣的速度進行改變
ease-in:動畫開始時速度慢，速度沿曲線值進行加速
ease-out：動畫開始時速度快，速度沿曲線值進行放慢
transform：
css3 2D transform獲得個主流瀏覽器的支持
transform實現了一些可用SVG實現的變形功能
也可以用於塊級嚴肅和內聯元素，該屬性可以旋轉、縮放、移動元素，
transform可以控制文字的變形，
如：transform：rotate(30deg) scale(2);
旋轉動畫
1.瀏覽器支持：
safari 3.1 chrome 8 ff4.0 opera 10以上版本支持
rotate（）能夠旋轉指定的對象，主要在二維空間進行操作，接受一個角度的參數值，用來指定旋轉的幅度
元素對象可以是塊級元素也可以是內聯元素
縮放動畫
語法：
transform：scale(縮放的倍率)；或者transform：scale（水平縮放倍率，垂直縮放倍率）；
參數可以是正數、負數、小數
正數：基於寬高放大元素
負數：不會直接縮小元素，而是翻轉元素（如文字被翻轉），然後在縮放元素
小數：如：0.5可以縮小元素，第二個參數可選，若省略就和第一個參數相同
scale（）目前只支持ff,safari .chorme opera 10.5 IE不支持
傾斜動畫
skew():主要讓元素傾斜顯示，有兩個參數值，參數爲角度值，第二個可選，若省略，默認爲0deg
skew()和旋轉是不同
rotate（）只能旋轉，不會改變元素的形狀
skew()會改變嚴肅的形狀
語法：
transform：skew(水平方向上的傾斜角度)，或者 transform：skew(水平方向上的傾斜角度，垂直方向上的傾斜角度)
移動動畫
語法：
transform：translate(水平方向上的移動距離)或transform：translate(水平方向上的移動距離，垂直方向上的移動距離)
參數表示座標值，第二個參數可選，若省略爲0px,
目前只支持ff,safari .chorme opera 10.5 IE不支持
transform功能分類
1.指定變形的基準點：
在使用transform方法進行文字或者圖像變形時，是以元素爲中心爲基準點進行變形，使用transform-origin屬性：可以改變變形的基準點
語法：
transform-origin：基準點在水平方向上的位置，在垂直方向上的位置
perspective：
該屬性相對與觀衆產生一個3D場景，看到3d物體
，眼睛可以看到畫布的距離
perspective-origin爲視點的位置。
perspective：none|number
3D變形實現元素在x軸、Y軸、Z軸方向上的旋轉、縮放、傾斜、移動變形處理
1.旋轉
語法：
transform：rotateX(45deg);
transform：rotateY(45deg);
transform：rotateZ(45deg);
或者：
transform：rotateX(45deg) rotateY(45deg) rotateZ(45deg)；
2.縮放
語法：
transform：scaleX（0.5） scaleY(1) scaleZ(2);
3.傾斜：
語法：
transform：skewX(45deg) skewY(45deg);和2D效果相似
4.移動：
語法：
transform：translateX(50px) translateY(50px) translateZ(50px) ;
總結：
1.transform：css3中的變形處理，實現文字、圖像的旋轉、縮放、移動等
2.transition：通過一個屬性值平滑的過渡到另一個屬性值，實現動畫
3.animation:通過在樣式中創建對個關鍵幀，實現複雜的動畫
