首先來看下對(duì)各大瀏覽器的兼容性

?IEFirefoxSafariChromeOpera

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

這個(gè)比較簡單，控制元素進(jìn)行平面上的二維變換，有三個(gè)屬性：

1. 旋轉(zhuǎn) rotate()。對(duì)元素按順時(shí)針或逆時(shí)針方向進(jìn)行旋轉(zhuǎn)，其值為正數(shù)時(shí)，表示按順時(shí)針方向旋轉(zhuǎn)，其值為負(fù)數(shù)時(shí)，表示按逆時(shí)針方向旋轉(zhuǎn)。單位為度數(shù)（deg）。例如:

? ?ps:旋轉(zhuǎn)屬性可以實(shí)現(xiàn)那種常見的三角的tips效果。把一個(gè)正方形旋轉(zhuǎn)45度就變成◆了，自己試試吧

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

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

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

?transition

官方的解釋是“允許CSS的屬性值在一定的時(shí)間區(qū)間內(nèi)平滑地過渡。這種效果可以在鼠標(biāo)單擊、獲得焦點(diǎn)、被點(diǎn)擊或者對(duì)元素的任何改變中觸發(fā)，并以圓滑的動(dòng)畫效果改變CSS的屬性值”。比如原來的背景是#fff，hover時(shí)是#000，如果用了transition，就是從#fff平滑過渡成#000（發(fā)揮自己的想象力想一下吧）。

transition可以分解成4個(gè)屬性：

1. transtion-property 用于指定哪些屬性值改變時(shí)顯示transition動(dòng)畫效果。none表示沒有，all表示所有，或者用逗號(hào)分隔需要指定的屬性，如transition-property: background,width,height.

2. transition-duration 表示動(dòng)畫持續(xù)時(shí)間，可以設(shè)置多個(gè)值，中間用逗號(hào)分隔，其中每個(gè)值對(duì)應(yīng)transition-perproty設(shè)置的每個(gè)屬性。例如：

?

transition-perproty: width,height; transition-duration:1s,0.5s /*表示寬度的轉(zhuǎn)換動(dòng)畫持續(xù)的時(shí)間為1s，高度轉(zhuǎn)換動(dòng)畫持續(xù)的時(shí)間為0.5s*/

?

3. transition-timing-function 表示轉(zhuǎn)換動(dòng)畫的效果，有多個(gè)值可以選擇：

　　1）Linear 指定一個(gè)線性漸變

　　2）ease 指定一個(gè)逐漸慢下來的動(dòng)畫

　　3）ease-in 指定一個(gè)先慢后快的漸變動(dòng)畫

　　4）ease-out 指定一個(gè)先快后慢的漸變動(dòng)畫

　　5）ease-in-out 指定一個(gè)先慢后快再慢的漸變動(dòng)畫

　　6）cubic-bezier 使用貝塞爾曲線來指定一個(gè)復(fù)雜的動(dòng)畫漸變效果（這個(gè)效果很不錯(cuò)，可以做比較復(fù)雜的效果，附帶一個(gè)制作效果的網(wǎng)站：http://matthewlein.com/ceaser/）

4. transtion-delay 指定在動(dòng)畫開始前等待的時(shí)間，不需要時(shí)可以省略。

animation

animation比transition更接近動(dòng)畫的含義，可以為animation設(shè)置多幀的效果，然后把這些幀組合、變換，按動(dòng)畫效果顯示出來。共有6個(gè)屬性，在了解它的屬性之前，首先有必要先熟悉一下關(guān)鍵幀keyframes這個(gè)屬性。

keyframes 從字面上看，keyframes表示關(guān)鍵幀的意思。在flash里面也存在這個(gè)概念，我們可以想想一張gif動(dòng)畫由一幀一幀的圖像組成。在CSS3里，我們用keyframes描述第一幀的效果，用animation描述每一幀如何組合在一起以及表現(xiàn)的效果。格式如下：

?

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

?屬性：

1. animation-name 此屬性指定動(dòng)畫應(yīng)對(duì)的keyframes，比如設(shè)置animation-name為loading，那么動(dòng)畫就對(duì)應(yīng)@keyframes loading所聲明的關(guān)鍵幀。如果沒有定義關(guān)鍵幀，動(dòng)畫將不會(huì)生效。

2. animation-duration 定義一次動(dòng)畫的持續(xù)時(shí)間，默認(rèn)值為0

3. animation-delay 定義從觸發(fā)到開始動(dòng)畫的時(shí)間

4.?animation-timing-function 定義動(dòng)畫顯示的效果，例如先快后慢，先慢后快等，屬性值與transition-timing-function相同

5.?animation-iteration-count 該屬性定義動(dòng)畫循環(huán)的次數(shù)，默認(rèn)為1。我們可以用infinite來使動(dòng)畫無限次循環(huán)，這是transition動(dòng)畫所無法支持的。

6. animation-direction 定義動(dòng)畫播放的方向，默認(rèn)值為normal，代表每次動(dòng)畫都向前播放。另外一個(gè)值是alternate，第偶數(shù)次動(dòng)畫向前播放，第奇數(shù)次逆向播放。

?

要注意在寫以上的屬性時(shí)，都要根據(jù)不同的瀏覽器加上前綴，-webkit-,-o-,-ms-,-moz-

附帶相關(guān)鏈接：

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)

總結(jié)

以上是生活随笔為你收集整理的css3动画模块transform transition animation属性解释的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。