css3動畫模組transform transition animation屬性解釋

首先來看下對各大瀏覽器的相容性

	IE	Firefox	Safari	Chrome	Opera
CSS 2D Transform	no	3.5	3.2	2.0	10.5
CSS 3D Transform	no	no	4.* (Mac)	no	no
Transition	no	3.7	3.2	2.0	10.5
Animation	no	no	4.0	2.0	no

transform

這個比較簡單，控制元素進行平面上的二維變換，有三個屬性：

1. 旋轉 rotate()。對元素按順時針或逆時針方向進行旋轉，其值為正數時，表示按順時針方向旋轉，其值為負數時，表示按逆時針方向旋轉。單位為度數（deg）。例如:

   ps:旋轉屬性可以實現那種常見的三角的tips效果。把一個正方形旋轉45度就變成◆了，自己試試吧

2. 偏斜 skew(x,y)。有兩個參數，第一個表示按x軸方向傾斜的度數，第二個是y軸的度數。主要的區別是，x軸的值若為正數，表示逆時針偏斜，若為負數，表示順時針偏斜；而y軸的值跟x軸的剛好相反，正為順，負為逆。

3. 平移 translate(x,y)。平移是一種利用x和y座標值（單位為px）定位元素的方式，注意這個跟position的定位不一樣，它參照的位置是它本身，但position參照的是父級。

transform:rotate(45deg); /*順時針旋轉45度*/transform:rotate(-45deg); /*逆時針旋轉45度*/transform:skew(30deg,10deg); /*在x軸方向逆時針偏斜30度，在y軸方向順時針偏斜10度*/transform:translate(10px,15px); /*向左移動10px，向下移動15px*//*多個transform類型的設定可以寫一起的，之間用空格分隔，例如上面的可以這樣寫：*/transform:rotate(45deg) skew(30deg,10deg) translate(10px,15px)

 transition

官方的解釋是“允許CSS的屬性值在一定的時間區間內平滑地過渡。這種效果可以在按一下滑鼠、獲得焦點、被點擊或者對元素的任何改變中觸發，並以圓滑的動畫效果改變CSS的屬性值”。比如原來的背景是#fff，hover時是#000，如果用了transition，就是從#fff平滑過渡成#000（發揮自己的想象力想一下吧）。

transition可以分解成4個屬性：

1. transtion-property 用於指定哪些屬性值改變時顯示transition動畫效果。none表示沒有，all表示所有，或者用逗號分隔需要指定的屬性，如transition-property: background,width,height.

2. transition-duration 表示動畫期間，可以設定多個值，中間用逗號分隔，其中每個值對應transition-perproty設定的每個屬性。例如：

 

transition-perproty: width,height;transition-duration:1s,0.5s/*表示寬度的轉換動畫持續的時間為1s，高度轉換動畫持續的時間為0.5s*/

 

3. transition-timing-function 表示轉換動畫的效果，有多個值可以選擇：

　　1）Linear 指定一個線性漸層

　　2）ease 指定一個逐漸慢下來的動畫

　　3）ease-in 指定一個先慢後快的漸層動畫

　　4）ease-out 指定一個先快後慢的漸層動畫

　　5）ease-in-out 指定一個先慢後快再慢的漸層動畫

　　6）cubic-bezier 使用貝茲路徑來指定一個複雜的動畫漸層效果（這個效果很不錯，可以做比較複雜的效果，附帶一個製作效果的網站：http://matthewlein.com/ceaser/）

4. transtion-delay 指定在動畫開始前等待的時間，不需要時可以省略。

animation

animation比transition更接近動畫的含義，可以為animation設定多幀的效果，然後把這些幀組合、變換，按動畫效果顯示出來。共有6個屬性，在瞭解它的屬性之前，首先有必要先熟悉一下主要畫面格keyframes這個屬性。

keyframes 從字面上看，keyframes表示主要畫面格的意思。在flash裡面也存在這個概念，我們可以想想一張gif動畫由一幀一幀的映像組成。在CSS3裡，我們用keyframes描述第一幀的效果，用animation描述每一幀如何組合在一起以及表現的效果。格式如下：

 

@keyframes 動畫標識名{  /*動畫標識名將被animation-name屬性所引用*/   /*每一幀的動畫效果，可以通過百分比數值加樣式的形式來定義*/    0%{           background-color: white;    }    50%{           background-color: red;    }          100%{           background-color: black;      }}
/*我們可以把百分比數值看做第一幀在動畫中時間軸的位置，0%在時間軸的開始，50%在時間軸的正中，100%在時間軸的終點。那以上的動畫效果就是，元素的背景顏色會從白色漸層成紅色，再從紅色漸層成黑色。0%和100%也可以分別用form和to來代替*/
@keyframes 動畫標識名{    from{           background-color: white;    }    50%{           background-color: red;    }           to{           background-color: black;      }}

 屬性：

1. animation-name 此屬性指定動畫應對的keyframes，比如設定animation-name為loading，那麼動畫就對應@keyframes loading所聲明的主要畫面格。如果沒有定義主要畫面格，動畫將不會生效。

2. animation-duration 定義一次動畫的期間，預設值為0

3. animation-delay 定義從觸發到開始動畫的時間

4. animation-timing-function 定義動畫顯示的效果，例如先快後慢，先慢後快等，屬性值與transition-timing-function相同

5. animation-iteration-count 該屬性定義動畫迴圈的次數，預設為1。我們可以用infinite來使動畫無限次迴圈，這是transition動畫所無法支援的。

6. animation-direction 定義動畫播放的方向，預設值為normal，代表每次動畫都向前播放。另外一個值是alternate，第偶數次動畫向前播放，第奇數次逆向播放。

 

要注意在寫以上的屬性時，都要根據不同的瀏覽器加上首碼，-webkit-,-o-,-ms-,-moz-

附帶相關連結：

http://www.w3cplus.com/content/css3-transform(transform)

http://www.cnblogs.com/lianjun/archive/2011/09/30/2196912.html(transition)

http://www.cnblogs.com/lianjun/archive/2011/10/07/2200315.html(animation)