Transform
在部分的test case當(dāng)中，每每演示transform屬性的，看起來好像都是帶動畫。這使得小部分直覺化思維的人（包括我）認(rèn)為transform屬性是動畫屬性。而恰恰相反，transform屬性是靜態(tài)屬性，一旦寫到style里面，將會直接顯示作用，無任何變化過程。transform的主要用途是用來做元素的特殊變形，對于做設(shè)計(jì)的人來說并不是很陌生，簡單的來說就是css 的圖形變形工具。

關(guān)于圖形變形的基礎(chǔ)條件當(dāng)中的原點(diǎn)設(shè)定，在css里面使用的是transform-origin來定義的。這個定義的原點(diǎn)應(yīng)該是該css作用的元素的左上角為0,0來計(jì)算的（有待研究）。其他的屬性則根據(jù)這個屬性來計(jì)算進(jìn)行計(jì)算。

關(guān)于圖形變化的模式，css3標(biāo)準(zhǔn)當(dāng)中transform-style來定義。默認(rèn)是flat，展現(xiàn)出來的是簡單的效果。而preserve-3d則將空間呈現(xiàn)為3d模式。從正常的思維來說，應(yīng)該只需要preserve-3d就好了，但是從謠傳“開啟了perserve-3d就使用了GPU加速”來說，這個屬性可能是為了降低系統(tǒng)消耗用的，畢竟3d比2d要多一個維度的計(jì)算。

如果需要使用3d模式，必須先指定style為3d，并在任意父元素上增加 perspective及 perspective-origin 來指定透視點(diǎn)。

具體的給設(shè)計(jì)師改變元素樣式用的屬性則有以下五個：

     1、translate3d(x,y,z) 是用來控制元素的位置在頁面上的三軸的位置的；
     2、rotate(deg)是用來控制元素旋轉(zhuǎn)角度的；
     3、skew[x,y](deg) 這個屬性是用來制作傾斜度的，做過設(shè)計(jì)的人可能會知道，這個是用來在2d里面創(chuàng)建3d透視圖的時候必須的屬性；
     4、scale3d(x,y,z) 用來放大縮小效果，屬性是比值；
     5、matrix3d，css矩陣。通過這個矩陣屬性，涵蓋了上面所有的屬性值，但是個人覺得可讀性極差（全都是數(shù)字和單位，背起來有點(diǎn)模糊），目前沒有理由推薦使用。

總體看來 css transform的屬性和原來使用的left ，right ，top， bottom 的屬性從動靜角度來說沒有任何區(qū)別，因此使用的時候應(yīng)該將transform歸類到這類定位變形的靜態(tài)屬性里面。

Transition
transition屬性是一個簡單的動畫屬性，非常簡單非常容易用?？梢哉f它是animation的簡化版本，是給普通做簡單網(wǎng)頁特效用的。比如你有如下兩個樣式：

其中animate的transition的屬性的意思說：當(dāng)你的left屬性發(fā)生變化的時候，執(zhí)行動畫效果（僅僅基于left的屬性變化，其他的屬性不會加入到動畫變化里面去）；

首先你的元素的css為position。當(dāng)你將其cssList 增加 animate 或者替換position 為animate的時候，元素的屬性變化，觸發(fā)webkit-transition，以指定屬性變化前的值為起始值，變化后的屬性為結(jié)束值，執(zhí)行動畫效果。這是一個簡單的兩點(diǎn)變化過程，大大簡化了animation屬性的復(fù)雜程度。

同時，如果在transition的動畫當(dāng)中，屬性值有了新的變化，則會中斷當(dāng)前的動畫執(zhí)行，并將中斷時的屬性值提供給新的動畫作為起始值來計(jì)算新的動畫效果。

我在css編寫的時候，因?yàn)樽兓膶傩灾挥衪ransform一個，因此在transtion屬性里面指定響應(yīng)屬性為all，可以響應(yīng)并執(zhí)行元素所有屬性的變化動畫（能做動畫的屬性）。

Animation
在官方的Introduction上介紹這個屬性是transition屬性的擴(kuò)展。但是這個簡單的介紹里面包含了不簡單的東西：keyframes。

做過Flash動畫的人都會知道，F(xiàn)lash里面有兩個基礎(chǔ)武器：時間軸和關(guān)鍵幀。而css keyframes的出現(xiàn)，則是提供了flash世界里面的這兩個屬性的合集?？匆粋€簡單的 keyframes 的示例：

上面這個代碼展示了一個keyframes 'wobble'，其中 0％ 代表在變化中不同時間點(diǎn)的屬性值，你可以較精確的控制動畫變化中任何一個時間點(diǎn)的屬性效果。而animation則根據(jù)這個keyframes提供的屬性變化方式去計(jì)算元素動畫當(dāng)中的屬性。與 transition 不同的是，keyframes提供更多的控制，尤其是時間軸的控制，這點(diǎn)讓css animation更加強(qiáng)大，使得flash的部分動畫效果可以由css直接控制完成，而這一切，僅僅只需要幾行代碼，也因此誕生了大量（比起flash來說算是大量了）基于css的animation tools，用來取代flash的動畫部分。關(guān)于動畫工具，可以參考Web standards-based Animation Tools.

另外在animation屬性里面還有一個最重要的就是：animation-fill-mode，這個屬性標(biāo)示是以(from/0%)指定的樣式 還是以(to/100%)指定的樣式為動畫完成之后的樣式。這個很方便我們控制動畫的結(jié)尾樣式，保證動畫的整體連貫。

總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望能對大家的學(xué)習(xí)或者工作帶來一定的幫助。

最新評論