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)