CSS3中的變形與動畫詳細說明

　　最近在學習製作移動端的頁面，做了一個頁面的小demo，其中用到了很多的CSS3新增的內容，其中就有CSS3新增的變形和動畫。其實這種CSS3的動畫效果用JS也可以實現，不過CSS3能開啟硬體加速，效能更好。

　　（下面均沒寫瀏覽器首碼，如有需要請自行添加~~）

CSS3常見的動畫效果的實現，其實主要是靠 transition和 animation 。 而通常，這兩個又會和CSS3中的新屬性 transform 來搭配使用

那麼這三個東西其實是幹什麼用的呢？我按我自己的理解來下個簡單結論。

transform：把元素變形；

transition：元素的屬性變化時，給他一個過渡的動畫效果；

animation：做複雜動畫。

下面來詳細地說一下。

首先要說的是transform的文法：　　

transform:none | transform-functions ;

none是他的預設值，後面的transform-functions指的是變形函數；

變形函數分兩種：2D和3D；// 相關文法可以在http://www.w3school.com.cn/cssref/pr_transform.asp查詢

其中2D的包括：（變形的以元素中心為基準，即X軸和Y軸的50%處）

　　translate() //包括translateX() 和 translateY(); 作用：根據XOY座標來移動元素（X方向右邊為正，Y方向下邊為正）；

　　scale()　　 //包括scaleX() 和 scaleY(); 作用：放大或者縮小元素；

　　rotate() 　　 // 作用：旋轉元素；

　　skew() 　　 // 包括 skewX() 和 skewY(); 作用：讓元素傾斜。

而3D的就多了Z軸，相關文法可以在W3C查到，這裡重點推薦張鑫旭大神寫的一篇文章 （http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/） ，對於變形的講解通俗易懂。對於文章裡面說到的文法可以搭配後面這個模擬器來配合食用,效果更佳~ (http://fangyexu.com/tool-CSS3Inspector.html )

　　我來總結幾個點：1、進行3D變形時，變形的元素外面要先包兩層標籤 一個作為舞台，一個作為容器。

舞台    容器        元素        元素        ...

　　//我個人的理解是,如果舞台上的元素被當做一個整體來看待的話,可以只加一層標籤,即把舞台看作容器

舞台(容器)    元素    元素    ...

　　2、在舞台的CSS上，設定 perspective （視距），意思就是假設人離舞台的距離。在容器的CSS上設定 transform-style: preserve-3d 來開啟3D視圖，讓容器的子項目在3D空間中呈現。 //如果把舞台當做容器的話,perspective 和 transform-style 就寫在一起。

那麼，是不是變形的基點只能是元素的中心呢？不是的。 transform-origin屬性可以改變變形的基點。

transform-origin的關鍵字一般的就 top / bottom / left / right / center / top left / top right 之類的啦大家都熟，其中的某些單個關鍵字其實是簡寫，例如 top = top center = center top ；

接著就是過渡動畫 transition。

觸發條件是 :hover / :focus / :active / :checked / JS中的事件

文法： transition: 指定過渡的CSS屬性 、 過渡所需時間 、 過渡的函數（動畫的速度控制） 、 開始的延遲時間

指定過渡的CSS屬性：all / 指定樣式 / none （若省略不寫，則為 all ，none一般用於清空動畫）

過渡所需時間：單位s / ms （預設為0）

過渡的函數： ease（由快到慢 預設值） / linear（勻速） / ease-in（加速） / ease-out（減速） / ease-in-out（先加速後減速）/ cubic-bezier（三次貝茲路徑）

延遲時間：單位s / ms （預設為0）

（寫transition的時候，先寫 動畫時間 ， 再寫延遲時間）

舉個例子吧，博雅今年秋招的筆試題：

　　用 CSS3 實現一個半徑25px的圓 進行速度由快到慢的300px滾動。

p{ width:50px; height:50px; border-radius:25px; background:#000; transition:1s ease-out;}p:active{ transform:translateX(300px) rotate(780deg);}

賊簡單吧~ 這裡有幾個細節，第一個就是 transition 是放在元素上，而不是 active 上，如果放在active上，就沒有回去的動作了，大家可以試一下。

　　　　　　　　　　　　　　　　第二個就是，transform多個屬性的時候，中間用空格來隔開，如果用逗號的話就沒反應了。

但如果我在 :active 上加上 transition，

p{ width:50px; height:50px; border-radius:25px; background:#000; transition:1s ease-out;}p:active{ transform:translateX(300px) rotate(780deg);transition:2s ease-in;}

這樣按住的時候，就會執行 active 裡面的transition，也就是去的時候用時 2s ，加速運動；而回來的時候執行 p 裡的transition ，用時1s 減速運動。

最後就到 animation 了~ animation也是做動畫的，不過功能比 transition 更加強大，因為animation可以控制動畫的每一步，而transition只能控制開頭和結尾。

文法 animation: 主要畫面格動畫名字 、 動畫時間 、 動畫播放方式（函數） 、 延遲時間 、 迴圈次數 、 播放方向 、 播放狀態 、 動畫時間外的屬性 ；

主要畫面格動畫名字：就是你要執行的動畫的名字，這裡要Crowdsourced Security Testing道主要畫面格的文法

@keyframes name{     0%{       ...           }       50%{       ...    }    100%{       ...    }  }

這裡的主要畫面格的名字就是name ，然後百分比的就是動畫的進度，可以根據需要設定不同的百分比，再設定不同的動畫。

動畫時間：和transition一樣~

動畫播放方式（函數）：和transition的過渡的函數一樣~

延遲時間：和transition一樣~

迴圈次數：動畫播放的次數，預設為1，通常為整數，如果為 infinite，則無限次地播放；

播放方向：預設為normal，就是正常地向前播放，還有一個值是 alternate ，就是先正向播放，再反向播放，不斷地交替；

播放狀態：running(預設) 、 paused // 像播音樂一樣可以通過動作來暫停動畫;

動畫時間外的屬性: none(預設) 、 forwards 、 backwards 、both；

　　舉個例子吧：

@keyframes color{    0%{ background:yellow}    100%{ background:blue}}p{ background:black}

　　none：　　　　動畫開始前：黑 ； 動畫結束後：黑

　　forwards：　　動畫開始前：黑 ； 動畫結束後：藍

　　backwards：　動畫開始之前：黃 ； 動畫結束後：黑

　　both：　　　　動畫開始前：黃 ； 動畫結束後：藍

就是這麼簡單~

最後，說一下這三個屬性在JS中的寫法：

transform：

obj.style.transform = "translateX(100px) scale(2)";obj.style.webkitTransform = "translateX(100px) scale(2)";//帶瀏覽器首碼

transition：

obj.style.transition = "1s";obj.style.webKitTransition = "1s";//帶瀏覽器首碼

animation：

obj.style.animation = "name 1s ";//1、主要畫面格先在css寫好；2、相容寫法在主要畫面格裡面寫；