Transform + Transitions + Animation

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的動畫關鍵幀。