Transform 轉換
一些常用的屬性：
- transform: none | transform-functions;【通過設置該屬性的值，我們可以對元素使用轉換，具體的屬性值在下面會專門介紹。】
- transform-origin: x-axis y-axis z-axis;【設置元素轉換的中心點，最直觀的例子旋轉圖片，改變圖片選擇依賴的旋轉中心。】
- transform-style: flat | preserve-3d;【定義裏面轉換的元素是在2D平面呈現還是在3D空間呈現，講的直白些，就是這個元素裏面的空間維度是二維還是三維。】
- perspective: number | none;【屬性是定義3D元素距試圖的距離，設置以後，其子元素會獲得透視效果，需要注意的是該值只對3D轉換有效，這也是很容易理解的。此外，還可以通過Transform的屬性值的方式設置，二者是有一定區別的，你可以認為，前者是把整個看成一個舞台，後者是每一個都是一個舞台。】
- perspective-origin: x-axis y-axis;【必須和perspective一起使用，只對3D轉換元素有效，簡單的理解就是你的眼睛看的焦點。】
- backface-visibility:hidden | visible;【這個很簡單，設置當元素背對着屏幕時候，是否是可見的。】
上面介紹的屬性transform: none | transform-functions;其中有很多方法可以使用，具體的請查看文件API，這裏沒有列舉出來的意義，其中perspective(n)方法是為3D轉換元素定義透視視圖，需要稍微留意一下，其中一些方法比較特殊，以後會單獨去介紹。
Transitions 過渡
transition: property duration timing-function delay;請始終設置 transition-duration 屬性，否則時長為 0，就不會產生過渡效果。上面是統一設置，也可以分別設置各個屬性。
一些常用的屬性：
- transition-property：規定設置過渡效果的 CSS 屬性的名稱；
- transition-duration：規定完成過渡效果需要多少秒或毫秒；
- transition-timing-function：規定速度效果的速度曲線；
- transition-delay：定義過渡效果何時開始。
Animation 動畫
animation: name duration timing-function delay iteration-count direction;請始終規定 animation-duration 屬性，否則時長為 0，就不會播放動畫了。上面是統一設置，也可以分別設置各個屬性。
一些常用的屬性：
- animation-name：規定需要綁定到選擇器的 keyframe 名稱；
- animation-duration：規定完成動畫所花費的時間，以秒或毫秒計；
- animation-timing-function： 規定動畫的速度曲線；
- animation-delay：規定在動畫開始之前的延遲；
- animation-iteration-count：規定動畫應該播放的次數；
- animation-direction：規定是否應該輪流反向播放動畫；
- animation-fill-mode (可以設置為none | forwards | backwards | both)：規定動畫在播放之前或之後，其動畫效果是否可見；
- animation-play-state（可以設置為paused|running）：規定動畫正在運行還是暫停，可以在 JavaScript 中使用該屬性，這樣就能在播放過程中暫停動畫；
- @keyframes animName{from {} to {}}：定義動畫名稱為animName的動畫關鍵幀。
