CSS Transform / Transition / Animation 屬性的區別

 

back21 Jun 2011 Category: tech Tags: css

最近想UI的動畫轉到css3能吃進3d加速的屬性上面來以增強動畫的連貫性。只是對於css幾個新加的屬性不太熟悉，經常容易搞混。研究了點資料，總結一下。

Introduce

Transform

在部分的test case當中，往往演示transform屬性的，看起來好像都是帶動畫。這使得小部分直覺化思惟的人（包括我）認爲transform屬性是動畫屬性。而偏偏相反，transform屬性是靜態屬性，一旦寫到style裏面，將會直接顯示做用，無任何變化過程。transform的主要用途是用來作元素的特殊變形，對於作設計的人來講並非很陌生，簡單的來講就是css 的圖形變形工具。

關於圖形變形的基礎條件當中的原點設定，在css裏面使用的是transform-origin來定義的。這個定義的原點應該是該css做用的元素的左上角爲0,0來計算的（有待研究）。其餘的屬性則根據這個屬性來計算進行計算。

關於圖形變化的模式，css3標準當中transform-style來定義。默認是flat，展示出來的是簡單的效果。而preserve-3d則將空間呈現爲3d模式。從正常的思惟來講，應該只須要preserve-3d就行了，可是從謠傳「開啓了perserve-3d就使用了GPU加速」來講，這個屬性多是爲了下降系統消耗用的，畢竟3d比2d要多一個維度的計算。

若是須要使用3d模式，必須先指定style爲3d，並在任意父元素上增長 perspective及 perspective-origin 來指定透視點。

具體的給設計師改變元素樣式用的屬性則有如下五個：

• translate3d(x,y,z) 是用來控制元素的位置在頁面上的三軸的位置的；
• rotate(deg)是用來控制元素旋轉角度的；
• skew[x,y](deg) 這個屬性是用來製做傾斜度的，作過設計的人可能會知道，這個是用來在2d裏面建立3d透視圖的時候必須的屬性；
• scale3d(x,y,z) 用來放大縮小效果，屬性是比值；
• matrix3d，css矩陣。經過這個矩陣屬性，涵蓋了上面全部的屬性值，可是我的以爲可讀性極差（全都是數字和單位，背起來有點模糊），目前沒有理由推薦使用。

整體看來 css transform的屬性和原來使用的left ，right ，top， bottom 的屬性從動靜角度來講沒有任何區別，所以使用的時候應該將transform歸類到這類定位變形的靜態屬性裏面。

Transition

transition屬性是一個簡單的動畫屬性，很是簡單很是容易用。能夠說它是animation的簡化版本，是給普通作簡單網頁特效用的。好比你有以下兩個樣式：

.position{
    left:100px;
    top:100px;
}
.animate{
    -webkit-transition:left 0.5s ease-out;
    left:500px;
    top:500px;
}

其中animate的transition的屬性的意思說：當你的left屬性發生變化的時候，執行動畫效果（僅僅基於left的屬性變化，其餘的屬性不會加入到動畫變化裏面去）；

首先你的元素的css爲position。當你將其cssList 增長 animate 或者替換position 爲animate的時候，元素的屬性變化，觸發webkit-transition，以指定屬性變化前的值爲起始值，變化後的屬性爲結束值，執行動畫效果。這是一個簡單的兩點變化過程，大大簡化了animation屬性的複雜程度。

同時，若是在transition的動畫當中，屬性值有了新的變化，則會中斷當前的動畫執行，並將中斷時的屬性值提供給新的動畫做爲起始值來計算新的動畫效果。

我在css編寫的時候，由於變化的屬性只有transform一個，所以在transtion屬性裏面指定響應屬性爲all，能夠響應並執行元素全部屬性的變化動畫（能作動畫的屬性）。

Animation

在官方的Introduction上介紹這個屬性是transition屬性的擴展。可是這個簡單的介紹裏面包含了不簡單的東西：keyframes。

作過Flash動畫的人都會知道，Flash裏面有兩個基礎武器：時間軸和關鍵幀。而css keyframes的出現，則是提供了flash世界裏面的這兩個屬性的合集。看一個簡單的 keyframes 的示例：

@keyframes 'wobble'{
  0%{
   left:100px
}
   30%{
   left:300px;
}
  100%{
   left:500px;
}
}
.animate{
	left:100px;
   -webkit-animation:wobble 0.5s ease-out;
   -webkit-animation-fill-mode:backwards;
}

上面這個代碼展現了一個keyframes 'wobble'，其中 0％ 表明在變化中不一樣時間點的屬性值，你能夠較精確的控制動畫變化中任何一個時間點的屬性效果。而animation則根據這個keyframes提供的屬性變化方式去計算元素動畫當中的屬性。與 transition 不一樣的是，keyframes提供更多的控制，尤爲是時間軸的控制，這點讓css animation更增強大，使得flash的部分動畫效果能夠由css直接控制完成，而這一切，僅僅只須要幾行代碼，也所以誕生了大量（比起flash來講算是大量了）基於css的animation tools，用來取代flash的動畫部分。關於動畫工具，能夠參考Web standards-based Animation Tools.

另外在animation屬性裏面還有一個最重要的就是：animation-fill-mode，這個屬性標示是以(from/0%)指定的樣式 仍是以(to/100%)指定的樣式爲動畫完成以後的樣式。這個很方便咱們控制動畫的結尾樣式，保證動畫的總體連貫。

Resources

• CSS Animations @W3C
• CSS 2D Transforms @W3C
• CSS 3D Transforms Module Level 3 @W3C
• Animation.css This is a animation library just made by css.
• Personal css animation collection

UPDATE

• [2012-04-20] Add introduce about animation-fill-mode. Add resources.
• [2011-06-21] Fixed style, add animation tools introduce.

-- EOF --