樓主喜歡追求視覺上的享受，雖常以犧牲性能無(wú)法兼容為代價(jià)卻也樂此不疲。本文就通過一個(gè)個(gè)的demo演示來(lái)簡(jiǎn)單了解下css3下的Transform，Transition和Animation。

　　本文需要實(shí)現(xiàn)效果：（請(qǐng)用chrome打開）

圖片輪播

圖片自動(dòng)輪播

?

Transform

　　根據(jù)我的理解，transform和width、height、background一樣，都是dom的屬性，不同的是它是css3旗下的，比較?，能夠?qū)υ瓉?lái)的dom元素進(jìn)行移動(dòng)、縮放、轉(zhuǎn)動(dòng)、拉長(zhǎng)或拉伸，跟canvas上的某些api神似，這么說(shuō)來(lái)transform好像能干些js才能干的事。

　　transform分2D變換和3D變換，w3school中有很好的介紹和例子，具體請(qǐng)猛戳：CSS3 2D 轉(zhuǎn)換??CSS3 3D 轉(zhuǎn)換

　　為了方便查找，我把w3school上的截圖在這里保存一份：

?

Transition

　　transition的解釋是過渡，我的理解是css之間的變換，但是這個(gè)變換很?很平滑，類似動(dòng)畫。舉個(gè)栗子，一開始某個(gè)dom的類是classA，通過某種操作（比如被點(diǎn)擊了）后變成了classB，如果沒有transition，類之間的變換是很快的，機(jī)械般瞬間完成，但是有了transition，這便會(huì)是一個(gè)很緩和平滑的過程。

　　我們通過demo來(lái)講解transition的使用方式。

　　寫好如下的html文件：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css"></style>  <img  src='http://hanzichi.github.io/img/img0.png' / alt="【css3】通過圖片輪播來(lái)了解Transform，Transition和Animation_html/css_WEB-ITnose" >

　　打開來(lái)是非常簡(jiǎn)單的一張圖，加上css：

img {  -webkit-transition: all 1s ease-in-out 0s;}img:hover {  -webkit-transform:     rotate(360deg)    scale(0.5, 0.5);  opacity: 0;}

　　效果請(qǐng)猛戳：transition變換 （ps：所有demo都沒有做兼容 請(qǐng)用chrome打開）

　　是否很簡(jiǎn)單？demo中，你只需設(shè)定好圖片（img標(biāo)簽）原先的屬性和hover后的屬性，中間的變換過程全由transition搞定！而transition加在某個(gè)元素下（demo的transition加在img標(biāo)簽下），仿佛設(shè)置了一個(gè)監(jiān)聽器，一旦該元素的屬性值即將要發(fā)生變化，就會(huì)自動(dòng)檢查transition中的設(shè)定的屬性，一旦發(fā)現(xiàn)相匹配，則進(jìn)行平滑的過渡。

　　transition有4個(gè)屬性，語(yǔ)法：transition: property duration timing-function delay 從前到后4個(gè)屬性依次可理解成“過渡動(dòng)畫變換的屬性”、“過渡花費(fèi)時(shí)間”、“過渡過程的速度變化”和“過渡開始前的等待時(shí)間”（默認(rèn)值：all 0 ease 0 前兩個(gè)是必須的 后兩個(gè)可省略）。

　　如果不是所有屬性都要進(jìn)行平滑過渡，或者各屬性過渡的時(shí)間、速度等設(shè)置各有需求，可以把要過渡的屬性用逗號(hào)隔開，demo可寫成：

img {  -webkit-transition:     -webkit-transform 1s ease-in-out 0s,    opacity 1s ease-in-out 1s;}img:hover {  -webkit-transform:     rotate(360deg)    scale(0.5, 0.5);  opacity: 0;}

　　如果非得把transition的四個(gè)屬性分開來(lái)寫，可以這樣：

img {  -webkit-transition-property: -webkit-transform, opacity;  -webkit-transition-duration: 1s;  -webkit-transition-timing-function: ease-in-out;  -webkit-transition-delay: 0s;}

　　我把后三個(gè)屬性放在一起只寫了一個(gè)值（因?yàn)橹狄粯樱阋部梢韵駊roperty一樣分開來(lái)寫用逗號(hào)隔開。

　　這里再介紹下timing-function的取值。六大取值：（還是盜圖w3cschool）

　　小結(jié)：一般transition應(yīng)用在dom的class變換中，可先行寫好機(jī)械的變換，然后添加過渡效果。

Animation

　　Animation的解釋是動(dòng)畫，加強(qiáng)版的transition。

　　如果說(shuō)transition能實(shí)現(xiàn)某些js效果，animation就更像是js了。類似于寫一個(gè)canvas特效，特效總共比如說(shuō)多少時(shí)間，我們能規(guī)定在什么時(shí)候該出現(xiàn)什么樣的場(chǎng)景，而各個(gè)場(chǎng)景間的轉(zhuǎn)換則完全由css3本身負(fù)責(zé)，而keyframes好比定義了一個(gè)js方法。

　　主要應(yīng)用在某個(gè)元素需要進(jìn)行連續(xù)的n次css變換。一個(gè)簡(jiǎn)單的demo如下：animation動(dòng)畫

　　我們?cè)贎keyframes 中創(chuàng)建動(dòng)畫時(shí)，請(qǐng)把它捆綁到某個(gè)選擇器，否則不會(huì)產(chǎn)生動(dòng)畫效果。

　　通過規(guī)定至少以下兩項(xiàng) CSS3 動(dòng)畫屬性，即可將動(dòng)畫綁定到選擇器：

規(guī)定動(dòng)畫的名稱

規(guī)定動(dòng)畫的時(shí)長(zhǎng)

demo代碼：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">  img {    /*-webkit-animation: myfirst 5s;*/  }    @-webkit-keyframes myfirst  {    0% {      -webkit-transform:         rotate(0deg)        scale(1, 1);      opacity: 1;    }        50% {      -webkit-transform:         rotate(360deg)        scale(0.5, 0.5);      opacity: 0.5;    }        100% {      -webkit-transform:         rotate(0deg)        scale(1, 1)        translate(300px, 200px);      opacity: 1;    }  }  img {    -webkit-animation: myfirst 5s linear 0s 1 alternate;    /*停在結(jié)束位置*/    -webkit-animation-fill-mode: forwards;  }</style>  <img  src='http://hanzichi.github.io/img/img0.png' / alt="【css3】通過圖片輪播來(lái)了解Transform，Transition和Animation_html/css_WEB-ITnose" >

更多請(qǐng)猛戳 CSS3 動(dòng)畫

具體應(yīng)用：圖片輪播

　　類似應(yīng)用可先寫好無(wú)過渡的代碼，然后再在class轉(zhuǎn)換之間添加transition。

　　該demo（圖片自動(dòng)輪播）和transition有關(guān)的核心代碼就幾行，而js只是簡(jiǎn)單的對(duì)元素的class進(jìn)行賦值，動(dòng)畫過程全由css3完成！

img {  position: absolute;  -webkit-transition: all 2s ease-out;}.disappear {  opacity: 0;}.show {  opacity: 1;}

　　當(dāng)img的class從show轉(zhuǎn)換成disappear或者從disappear轉(zhuǎn)換成show時(shí)（img標(biāo)簽下的class變換），就會(huì)執(zhí)行transition設(shè)置的過渡動(dòng)畫。

　　另一個(gè)demo的實(shí)現(xiàn)也大同小異，有興趣的可以參考源碼：源碼請(qǐng)猛戳

?

總結(jié)

　　總的來(lái)說(shuō)，transform只是為dom增添一些屬性，而如果搭配transition或者animation則能完成一些動(dòng)畫效果，我覺得實(shí)際應(yīng)用較多的應(yīng)該還是transition，可配合偽類或者click等事件。

　　樓主對(duì)以上的理解不深，如有出入，還請(qǐng)指出。

　　如需了解更多，可以參考這篇?CSS3 Transitions, Transforms和Animation使用簡(jiǎn)介與應(yīng)用展示