Transform/Transition/Animation的區別與聯繫

‍

Transform，變形：‍

    首先，它的做用是變形，它是靜態的！它是靜態的！它是靜態的！重要的話說三遍！它就像普通的CSS width/height/color屬性同樣，讓元素展示不一樣的style，一旦元素被施上transform屬性，就直接顯示效果。只不過它能讓元素的style更modern而已。它包括旋轉rotate、扭曲skew、縮放scale和移動translate以及矩陣變形matrix等功能，固然這些變形分2D跟3D。

    既然是變形，總要基於一個基準座標位置進行變換，2D有X-Y軸座標，3D是X-Y-Z座標，至於具體按照這些座標上的那個空間點進行變化，則須要依賴transform-origin，它將做用在須要變形的Html元素上，告訴元素若是你要變化了，該圍繞着那個基準點進行扭動，否則會摔得很慘。

    參考：w3cplus CSS 2D、w3cplus CSS 3D、w3school CSS 2D，w3school CSS 3D

Transition，過渡：

    首先，它的做用是過渡，是給上述的變形加上時間概念，讓它在一段特定的時間裏按照特定的速度進行變化（能夠指定過渡依賴屬性transition-property、過渡時間transition-duration、過渡速率transition-timing-function、過渡時間延遲transition-delay條件）。

    並且它的強大正是可讓元素按照上述條件進行個性化：例如某個元素的style將從黃色bgcolor變爲藍色bgcolor，而且經過margin-left右移100px。那麼指定transition-propertry爲background-color後，背景顏色的改變將按照transition指定的時間（假設爲2s）、速率（假設爲linear勻速）跟延遲（假設0s不延遲）進行，而右移則是一會兒完成。所以當元素style被改變時，你將看到元素一會兒向右位移100px，而背景顏色會在2s內從黃色勻速漸變爲藍色。反之若是transition設置在margin-left上，那麼顏色是一會兒變成藍色，元素位置則會在2s內勻速移到右邊100px處。

    其實費這麼大力氣用文字解釋這個，是爲了先知道然。至於因此然，不就是一堆transition參數嘛。

Animation，動畫：

    仍是首先，它是動畫，從效果上能夠「膚淺」地認爲它是Transition跟Transform（或者普通CSS屬性）的組合。龍生九子（什麼鬼？），但畢竟有所不一樣：Animation能夠經過keyframe顯式控制當前幀的屬性，何時幹什麼徹底能說了算，比Transition更靈活；Transition在過渡以後會改變元素的屬性（固然不能徹底怪它，它只是讓元素「這麼着」地從原始屬性變爲目標屬性），而Animation只是模擬元素的屬性改變並在必定時間內按照必定速率（這些跟Transition相似）來PLAY動畫，動畫結束了元素本來長啥樣就顯示啥樣，它拍拍屁股走人，LIKE A PLAYBOY。它們的目的都是讓元素可以動起來，至於怎麼個手法，它們確實是在如何改變屬性值這方面各有千秋。參考：w3cplus CSS3 Animation

先這樣吧，飯後再說。