CSS3常見的動(dòng)畫效果的實(shí)現(xiàn)，其實(shí)主要是靠 transition和 animation 。 而通常，這兩個(gè)又會(huì)和CSS3中的新屬性transform 來搭配使用
那么這三個(gè)東西其實(shí)是干什么用的呢？我按我自己的理解來下個(gè)簡(jiǎn)單結(jié)論。
transform：把元素變形；
transition：元素的屬性變化時(shí)，給他一個(gè)過渡的動(dòng)畫效果；
animation：做復(fù)雜動(dòng)畫。
下面來詳細(xì)地說一下。
首先要說的是transform的語法：
1
transform:
none
| transform-functions ;
none是他的默認(rèn)值，后面的transform-functions指的是變形函數(shù)；
變形函數(shù)分兩種：2D和3D；
// 相關(guān)語法可以在http://www.w3school.com.cn/cssref/pr_transform.asp查詢
其中2D的包括：（變形的以元素中心為基準(zhǔn)，即X軸和Y軸的50%處）
translate()
//包括translateX() 和 translateY(); 作用：根據(jù)XOY坐標(biāo)來移動(dòng)元素（X方向右邊為正，Y方向下邊為正）；
scale()
//包括scaleX() 和 scaleY(); 作用：放大或者縮小元素；
rotate()
// 作用：旋轉(zhuǎn)元素；
skew()
// 包括 skewX() 和 skewY(); 作用：讓元素傾斜。
2、在舞臺(tái)的CSS上，設(shè)置 perspective （視距），意思就是假設(shè)人離舞臺(tái)的距離。在容器的CSS上設(shè)置 transform-style: preserve-3d 來開啟3D視圖，讓容器的子元素在3D空間中呈現(xiàn)。 //如果把舞臺(tái)當(dāng)做容器的話,perspective 和 transform-style 就寫在一起。
那么，是不是變形的基點(diǎn)只能是元素的中心呢？不是的。 transform-origin屬性可以改變變形的基點(diǎn)。
transform-origin的關(guān)鍵字一般的就 top / bottom / left / right / center / top left / top right 之類的啦大家都熟，其中的某些單個(gè)關(guān)鍵字其實(shí)是簡(jiǎn)寫，例如 top = top center = center top ；
接著就是過渡動(dòng)畫 transition。
觸發(fā)條件是 :hover / :focus / :active / :checked / JS中的事件
語法： transition: 指定過渡的CSS屬性 、 過渡所需時(shí)間 、 過渡的函數(shù)（動(dòng)畫的速度控制） 、 開始的延遲時(shí)間
指定過渡的CSS屬性：all / 指定樣式 / none （若省略不寫，則為 all ，none一般用于清空動(dòng)畫）
過渡所需時(shí)間：?jiǎn)挝籹 / ms （默認(rèn)為0）
過渡的函數(shù)： ease（由快到慢 默認(rèn)值） / linear（勻速） / ease-in（加速） / ease-out（減速） / ease-in-out（先加速后減速）/ cubic-bezier（三次貝塞爾曲線）
延遲時(shí)間：?jiǎn)挝籹 / ms （默認(rèn)為0）
（寫transition的時(shí)候，先寫 動(dòng)畫時(shí)間 ， 再寫延遲時(shí)間）
用 CSS3 實(shí)現(xiàn)一個(gè)半徑25px的圓 進(jìn)行速度由快到慢的300px滾動(dòng)。
1
2
div{
width:50px;
height:50px;
border-radius:25px;
background:#000;
transition: 1s ease-out;
}
div:active{
transform:translateX(300px) rotate(780deg);}
賊簡(jiǎn)單吧~ 這里有幾個(gè)細(xì)節(jié)，第一個(gè)就是 transition 是放在元素上，而不是 active 上，如果放在active上，就沒有回去的動(dòng)作了，大家可以試一下。第二個(gè)就是，transform多個(gè)屬性的時(shí)候，中間用空格來隔開，如果用逗號(hào)的話就沒反應(yīng)了。
但如果我在 :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;
}
這樣按住的時(shí)候，就會(huì)執(zhí)行 active 里面的transition，也就是去的時(shí)候用時(shí) 2s ，加速運(yùn)動(dòng)；而回來的時(shí)候執(zhí)行 div 里的transition ，用時(shí)1s 減速運(yùn)動(dòng)。
最后就到 animation 了~ animation也是做動(dòng)畫的，不過功能比 transition 更加強(qiáng)大，因?yàn)閍nimation可以控制動(dòng)畫的每一步，而transition只能控制開頭和結(jié)尾。
語法 animation: 關(guān)鍵幀動(dòng)畫名字 、 動(dòng)畫時(shí)間 、 動(dòng)畫播放方式（函數(shù)） 、 延遲時(shí)間 、 循環(huán)次數(shù) 、 播放方向 、 播放狀態(tài) 、 動(dòng)畫時(shí)間外的屬性 ；
關(guān)鍵幀動(dòng)畫名字：就是你要執(zhí)行的動(dòng)畫的名字，這里要先知道關(guān)鍵幀的語法
@keyframes name{
0%{ ... }
50%{ ... }
100%{ ... }
}
這里的關(guān)鍵幀的名字就是name ，然后百分比的就是動(dòng)畫的進(jìn)度，可以根據(jù)需要設(shè)置不同的百分比，再設(shè)置不同的動(dòng)畫。
動(dòng)畫時(shí)間：和transition一樣~
動(dòng)畫播放方式（函數(shù)）：和transition的過渡的函數(shù)一樣~
延遲時(shí)間：和transition一樣~
循環(huán)次數(shù)：動(dòng)畫播放的次數(shù)，默認(rèn)為1，通常為整數(shù)，如果為 infinite，則無限次地播放；
播放方向：默認(rèn)為normal，就是正常地向前播放，還有一個(gè)值是 alternate ，就是先正向播放，再反向播放，不斷地交替；
播放狀態(tài)：running(默認(rèn)) 、 paused // 像播音樂一樣可以通過動(dòng)作來暫停動(dòng)畫;
動(dòng)畫時(shí)間外的屬性: none(默認(rèn)) 、 forwards 、 backwards 、both；
舉個(gè)例子吧：
@keyframes color{
0%
{
background:yellow
}
100%
{
background:blue
}
}
div{
background:black;
}
none： 動(dòng)畫開始前：黑 ； 動(dòng)畫結(jié)束后：黑
forwards： 動(dòng)畫開始前：黑 ； 動(dòng)畫結(jié)束后：藍(lán)
backwards： 動(dòng)畫開始之前：黃 ； 動(dòng)畫結(jié)束后：黑
both： 動(dòng)畫開始前：黃 ； 動(dòng)畫結(jié)束后：藍(lán)
就是這么簡(jiǎn)單~
最后，說一下這三個(gè)屬性在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)鍵幀里面寫；
