CSS3常見的動畫效果的實現(xiàn)燥撞，其實主要是靠 transition和 animation 娩贷。 而通常么翰，這兩個又會和CSS3中的新屬性transform 來搭配使用
那么這三個東西其實是干什么用的呢？我按我自己的理解來下個簡單結(jié)論寞蚌。
transform：把元素變形峻村；
transition：元素的屬性變化時麸折，給他一個過渡的動畫效果；
animation：做復雜動畫粘昨。
下面來詳細地說一下磕谅。
首先要說的是transform的語法：
1
transform:
none
| transform-functions ;
none是他的默認值，后面的transform-functions指的是變形函數(shù)雾棺；
變形函數(shù)分兩種：2D和3D；
// 相關(guān)語法可以在http://www.w3school.com.cn/cssref/pr_transform.asp查詢
其中2D的包括：（變形的以元素中心為基準衬浑，即X軸和Y軸的50%處）
translate()
//包括translateX() 和 translateY(); 作用：根據(jù)XOY坐標來移動元素（X方向右邊為正捌浩，Y方向下邊為正）；
scale()
//包括scaleX() 和 scaleY(); 作用：放大或者縮小元素工秩；
rotate()
// 作用：旋轉(zhuǎn)元素尸饺；
skew()
// 包括 skewX() 和 skewY(); 作用：讓元素傾斜。
2助币、在舞臺的CSS上浪听，設置 perspective （視距），意思就是假設人離舞臺的距離眉菱。在容器的CSS上設置 transform-style: preserve-3d 來開啟3D視圖迹栓，讓容器的子元素在3D空間中呈現(xiàn)。 //如果把舞臺當做容器的話,perspective 和 transform-style 就寫在一起俭缓。
那么克伊，是不是變形的基點只能是元素的中心呢酥郭？不是的。 transform-origin屬性可以改變變形的基點愿吹。
transform-origin的關(guān)鍵字一般的就 top / bottom / left / right / center / top left / top right 之類的啦大家都熟不从，其中的某些單個關(guān)鍵字其實是簡寫，例如 top = top center = center top 犁跪；
接著就是過渡動畫 transition椿息。
觸發(fā)條件是 :hover / :focus / :active / :checked / JS中的事件
語法： transition: 指定過渡的CSS屬性 、 過渡所需時間 坷衍、 過渡的函數(shù)（動畫的速度控制） 寝优、 開始的延遲時間
指定過渡的CSS屬性：all / 指定樣式 / none （若省略不寫，則為 all 惫叛，none一般用于清空動畫）
過渡所需時間：單位s / ms （默認為0）
過渡的函數(shù)： ease（由快到慢 默認值） / linear（勻速） / ease-in（加速） / ease-out（減速） / ease-in-out（先加速后減速）/ cubic-bezier（三次貝塞爾曲線）
延遲時間：單位s / ms （默認為0）
（寫transition的時候倡勇，先寫 動畫時間 ， 再寫延遲時間）
用 CSS3 實現(xiàn)一個半徑25px的圓 進行速度由快到慢的300px滾動嘉涌。
1
2
div{
width:50px;
height:50px;
border-radius:25px;
background:#000;
transition: 1s ease-out;
}
div:active{
transform:translateX(300px) rotate(780deg);}
賊簡單吧~ 這里有幾個細節(jié)妻熊，第一個就是 transition 是放在元素上，而不是 active 上仑最，如果放在active上扔役，就沒有回去的動作了，大家可以試一下警医。第二個就是亿胸，transform多個屬性的時候，中間用空格來隔開预皇，如果用逗號的話就沒反應了侈玄。
但如果我在 :active 上加上 transition，
div{
width:50px;
height:50px;
border-radius:25px;
background:#000;
transition:1s ease-out;
}
div:active{
transform:translateX(300px) rotate(780deg);
transition:2s ease-in;
}
這樣按住的時候吟温，就會執(zhí)行 active 里面的transition序仙，也就是去的時候用時 2s ，加速運動鲁豪；而回來的時候執(zhí)行 div 里的transition 潘悼，用時1s 減速運動。
最后就到 animation 了~ animation也是做動畫的爬橡，不過功能比 transition 更加強大治唤，因為animation可以控制動畫的每一步，而transition只能控制開頭和結(jié)尾糙申。
語法 animation: 關(guān)鍵幀動畫名字 宾添、 動畫時間 、 動畫播放方式（函數(shù)） 、 延遲時間 辞槐、 循環(huán)次數(shù) 掷漱、 播放方向 、 播放狀態(tài) 榄檬、 動畫時間外的屬性 卜范；
關(guān)鍵幀動畫名字：就是你要執(zhí)行的動畫的名字，這里要先知道關(guān)鍵幀的語法
@keyframes name{
0%{ ... }
50%{ ... }
100%{ ... }
}
這里的關(guān)鍵幀的名字就是name 鹿榜，然后百分比的就是動畫的進度海雪，可以根據(jù)需要設置不同的百分比，再設置不同的動畫舱殿。
動畫時間：和transition一樣~
動畫播放方式（函數(shù)）：和transition的過渡的函數(shù)一樣~
延遲時間：和transition一樣~
循環(huán)次數(shù)：動畫播放的次數(shù)奥裸，默認為1，通常為整數(shù)沪袭，如果為 infinite湾宙，則無限次地播放；
播放方向：默認為normal冈绊，就是正常地向前播放侠鳄，還有一個值是 alternate ，就是先正向播放死宣，再反向播放伟恶，不斷地交替；
播放狀態(tài)：running(默認) 毅该、 paused // 像播音樂一樣可以通過動作來暫停動畫;
動畫時間外的屬性: none(默認) 博秫、 forwards 、 backwards 眶掌、both挡育；
舉個例子吧：
@keyframes color{
0%
{
background:yellow
}
100%
{
background:blue
}
}
div{
background:black;
}
none： 動畫開始前：黑 ； 動畫結(jié)束后：黑
forwards： 動畫開始前：黑 朴爬； 動畫結(jié)束后：藍
backwards： 動畫開始之前：黃 静盅； 動畫結(jié)束后：黑
both： 動畫開始前：黃 ； 動畫結(jié)束后：藍
就是這么簡單~
最后寝殴，說一下這三個屬性在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、關(guān)鍵幀先在css寫好明垢；2蚣常、兼容寫法在關(guān)鍵幀里面寫；
