如何在網頁中實現動畫效果動態圖片
flashjavascriptcss3變形是一些效果的集合如平移 旋轉 縮放 傾斜效果每個效果都可以稱為變形（transfrom），它們可以分別操控元素發生平移、旋轉、縮放、傾斜等變換語法transform：[transfrom-function]*;
1. 變形函數translate（）：平移函數，基於X Y坐標重新定位元素位置scale（）：
2. 縮放函數，可以是元素對象尺寸放生變換rotate（）：旋轉函數，取值是一個度數skew（）：
3. 傾斜函數，取值是一個度數值2D的位移translate（tx, ty）tx:X軸（橫坐標）移動的向量長度ty:Y軸（縱坐標） 移動的向量長度
4. 2D縮放scale（sx,sy）sx:X軸（橫坐標）方向的縮放量sy:Y軸（縱坐標）高度方向的縮放量scale（）函數可以只接受一個值，也可以接受兩個值，只有一個值時，第二個默認和第一個值相等
5. 2D傾斜語法skew{ax,ay}ax:水平方向（X軸）的傾斜角度ay:水平方向（Y軸）的傾斜角度
6. 2D旋轉語法rotate（a）;參數a單位使用deg表示參數a取正值時元素相對原來中心順時針旋轉 rotate（）函數只是旋轉，而不會改變元素形狀skew（）函數是傾斜，元素不會旋轉，會改變元素形狀
css3過渡
語法：
transition:{transition-property transition-duration transition-timing-function transition-delay}
transition-property:過渡或動態模擬
css屬性transition-duration完成過渡需要的時間
transition-timing-function 指定過渡函數
transition-delay過渡開始出現的延遲時間
過渡屬性（transition-property）定義轉換的css的屬性名稱IDEBT
指定css屬性width height background-color 屬性等all
指定所有元素支持transition-property屬性樣式，一般為了方便都是用all過渡所需的時間（transition-duration）定義轉換動畫時間長度，
即從設置就屬性到換新屬性所花費的時間。單位秒（s）過度動畫的函數（transition-timing-function）指定瀏覽器的過渡速度 以及過渡期間的操作進展情況通過給過渡添加一個函數來指定動畫快慢速度ease 速度由快到慢（默認值）liner：速度恆速（勻速運動）ease-in：速度越來越快（漸顯效果）ease-out：速度越來越慢（漸隱效果）ease-in-out速度先加速在減速（漸顯漸隱效果）延遲的時間（transition-delay）指定一個動畫開始執行的時間，
當改變元素屬性值后多長時間去執行過渡效果正值 元素過渡效果不會立即觸發，當過了設置時間值才會被觸發負值 元素過渡效果會從該時間點開始顯示，之前的動作被截斷0默認值，元素過渡效果立即執行過渡的觸發機制偽類觸發：hover：active：focus：checked
媒體查詢：通過@media屬性判斷設備尺寸方向等JavaScript：
用JavaScript腳本觸發使用transition實現過渡動畫使用步驟在默認樣式中聲明元素的初始樣式聲明過渡元素最終狀態樣式，如懸浮狀態在默認樣式中通過添加過渡函數，添加一些不同樣式
css動畫animation實現動畫主要兩個部分組成通過類似flsah
動畫的關鍵幀來聲明一個動畫在animation屬性中調用關鍵幀聲明的動畫實現一個更為復雜的動畫效果設置關鍵幀
@keyframes IDENT｛
from｛ｃｓｓ樣式寫在這里｝
percentage｛ｃｓｓ樣式寫在這里｝
to{css樣式在這里}
｝
css3動畫制作步驟設置關鍵幀
@keyframes IDENT{
from {/*css樣式寫在這*/}
percentage{/*css樣式寫在這里*/}
to{/*css寫在着在這*/}
}
也可以將關鍵字from和to換成百分比
@keyframes IDENT{
0% {/*css樣式寫在這*/}
percentage{/*css樣式寫在這里*/}
0%{/*css寫在着在這*/}
}
其中IDENT就是一個動畫名，可以取任意定義的動畫名稱，當然語義化·一點重要。percentage就是一個百分比，用來定義某個時間的動畫效果
例子：
@keyframes spread{
0% {{width：0；}
33%{{width：23px；}
66%{{width：46px；}
100%{width：69px；}
}
上面代碼通過@keyframes聲明了一個名為spread的動畫，它的動畫從0%開始到100%是結束，同時還經歷33%和66%兩個過程。簡單來說，這個名叫spead的動畫一共有四個關鍵幀
@keyframes是實現動畫必不可少的一個屬性，可是瀏覽器對@keyframes的兼容性影響到動畫能在那個瀏覽器下運行，下面是他在各個主流瀏覽器下的支持情況：
| 屬性名 | IE | Firefox | Chrome | Opera | Safari |
| @keyframes | 10+ | 5.0+ | 4.0+ | 4.0+ | 12.0+ |
調用關鍵幀：
在CSS3中animation屬性可以調用@keyframes聲明的動畫。animation屬性類似transition屬性，他們都是隨着時間的改變來改變元素的屬性值，它們的區別：
1.transition實現動畫需要觸發一個事,（hover事件、active事件等）
2.animation可以在不觸發任何事件的情況下也能隨着時間的變化·來改變元素的CSS屬性值，從而達到一種動畫效果
例如：
animation：spread 2s linear；
-webkit-animation：spread 2s linear；
-moz-animation：spread 2s linear；
-o-animation：spread 2s linear；
animation的語法和其他幾個常用的屬性
animation; animation-name animation-duration animation-timing-functionanimat ion-delayanimation teration-count animation-direction animation-play-state animation-fill-mode；
animation：動畫化名稱 動畫的播放時間 動畫的播放方式 開始播放動畫的時間 動畫的播放次數 動畫的播放方向 動畫的播放態度 動畫時間外屬性
animation-name ：是由@keyframes創建的動畫名稱
animation-teration-count ：動畫的播放次數，通常指為整數，默認值為1，表示動畫執行一次。還有一個特殊值infinite，表示動畫無限次播放
animation-direction;動畫播放的方向 主要有兩個值 ，normal表示動畫每次循環向前播放，alternate，表示動畫播放為偶數次則向前播放，奇數次則反方向播放
animation-play-state：動畫的播放狀態 running將暫停的動畫上播放，paused將正在播放的元素動畫停下來
animation-fill-mode：定義在動畫開始之前和結束之后發生的操作