利用CSS3製做網頁動畫

如何在網頁中實現動畫效果動態圖片

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：定義在動畫開始以前和結束以後發生的操做