css3常見的動畫效果的實現，其實主要是靠transition和animation。 而通常，這兩個又會和css3中的新屬性transform來搭配使用
那麼這三個東西其實是幹什麼用的呢？我按我自己的理解來下個簡單結論。
transform：把元素變形；
transition：元素的屬性變化時，給他乙個過渡的動畫效果；
animation：做複雜動畫。
下面來詳細地說一下。
首先要說的是transform的語法：
1transform:none| transform-functions ;
none是他的預設值，後面的transform-functions指的是變形函式；
其中2d的包括：（變形的以元素中心為基準，即x軸和y軸的50%處）
translate() //包括translatex() 和 translatey(); 作用：根據xoy座標來移動元素（x方向右邊為正，y方向下邊為正）；
scale() //包括scalex() 和 scaley(); 作用：放大或者縮小元素；
rotate() // 作用：旋轉元素；
skew() // 包括 skewx() 和 skewy(); 作用：讓元素傾斜。
而3d的就多了z軸，相關語法可以在w3c查到，這裡重點推薦張鑫旭大神寫的一篇文章 （ ，對於變形的講解通俗易懂。對於文章裡面說到的語法可以搭配後面這個模擬器來配合食用,效果更佳~ ( )
我來總結幾個點：1、進行3d變形時，變形的元素外面要先包兩層標籤 乙個作為舞台，乙個作為容器。12
345舞台
容器
元素
元素
...
//我個人的理解是,如果舞台上的元素被當做乙個整體來看待的話,可以只加一層標籤,即把舞台看作容器12
34舞台(容器)
元素
元素
...
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一般用於清空動畫）
過渡的函式： ease（由快到慢 預設值） / linear（勻速） / ease-in（加速） / ease-out（減速） / ease-in-out（先加速後減速）/ cubic-bezier（三次貝塞爾曲線）
具體細微差別可以到 模擬哦~
（寫transition的時候，先寫 動畫時間 ， 再寫延遲時間）
舉個例子吧，博雅今年秋招的筆試題：
用 css3 實現乙個半徑25px的圓 進行速度由快到慢的300px滾動。12
div
div:active
賊簡單吧~ 這裡有幾個細節，第乙個就是 transition 是放在元素上，而不是 active 上，如果放在active上，就沒有回去的動作了，大家可以試一下。
第二個就是，transform多個屬性的時候，中間用空格來隔開，如果用逗號的話就沒反應了。
但如果我在 :active 上加上 transition，
1div
div:active
這樣按住的時候，就會執行 active 裡面的transition，也就是去的時候用時 2s ，加速運動；而回來的時候執行 div 裡的transition ，用時1s 減速運動。
最後就到 animation 了~ animation也是做動畫的，不過功能比 transition 更加強大，因為animation可以控制動畫的每一步，而transition只能控制開頭和結尾。
關鍵幀動畫名字：就是你要執行的動畫的名字，這裡要先知道關鍵幀的語法12
3456
78910
11@keyframes name
50%
100%
}
這裡的關鍵幀的名字就是name ，然後百分比的就是動畫的進度，可以根據需要設定不同的百分比，再設定不同的動畫。
動畫時間外的屬性: none(預設) 、 forwards 、 backwards 、both；
舉個例子吧：12
3456
@keyframes color
100%
}
div
none： 動畫開始前：黑 ； 動畫結束後：黑
forwards： 動畫開始前：黑 ； 動畫結束後：藍
backwards： 動畫開始之前：黃 ； 動畫結束後：黑
both： 動畫開始前：黃 ； 動畫結束後：藍
就是這麼簡單~
最後，說一下這三個屬性在js中的寫法：
transform：12
obj.style.transform ="translatex(100px) scale(2)";
obj.style.webkittransform ="translatex(100px) scale(2)";//帶瀏覽器字首
transition：12
obj.style.transition ="1s";
obj.style.webkittransition ="1s";//帶瀏覽器字首
animation：
1obj.style.animation ="name 1s ";//1、關鍵幀先在css寫好；2、相容寫法在關鍵幀裡面寫；
Css3中的變形與動畫
下面的 列出了所有的轉換屬性 屬性描述 csstransform 向元素應用 2d 或 3d 轉換。3transform origin 允許你改變被轉換元素的位置。32d transform 方法 matrix n,n,n,n,n,n 定義 2d 轉換，使用六個值的矩陣。translate x,y ...
CSS3中的變形與動畫（下）
1 css3 keyframes介紹 keyframes被稱為關鍵幀，其類似於flash中的關鍵幀。在css3中其主要以 keyframes 開頭，後面緊跟著是動畫名稱加上一對花括號 括號中就是一些不同時間段樣式規則。keyframes changecolor 100 在乙個 keyframes 中...
CSS3變形與動畫上
transform rotate 20deg 以自己中心點為旋轉中心，順時針 逆時針 transform skew 45deg 1 skew x,y 使元素在水平和垂直方向同時扭曲 x軸和y軸同時按一定的角度值進行扭曲變形 2 skewx x 僅使元素在水平方向扭曲變形 x軸扭曲變形 3 skewy...