CSS3中transform、transition和animationsan三種屬性的區別實例詳解

最近在專案中用到了CSS3中的動畫屬性。常常容易搞混。所以從網路上查了點資料，總結一下，方便有需要的朋友可以參考學習。

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 來指定透視點。

特定的給設計師改變元素樣式用的屬性則有以下五個：

     1、translate3d(x,y,z) 是用來控制元素的位置在頁面上的三軸的位置的；
     2、rotate(deg)是用來控制元素旋轉角度的；
     3、skew[x,y](deg) 這個屬性是用來製作傾斜度的，也做過設計的人可能會知道，這個是用來在2d裡面創建3d透視圖的時候必須的屬性；
     4、scale3d(x,y,z) 用來放大縮小效果，屬性是比值；
5、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%)指定的样式为动画完成之后的样式。这个很方便我们控制动画的结尾样式，保证动画的整体连贯。

以上是CSS3中transform、transition和animationsan三種屬性的區別實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！