1孽水、transition
CSS3的過渡功能就像是一種黃油，可以讓CSS的一些變化變得平滑匣屡。因?yàn)樵腃SS過渡在客戶端需要處理的資源要比用JavaScript和Flash少的多封救，所以才會(huì)更平滑。
1捣作、用法綜合寫法： transition: width 1s 1s linear,height 1s 1s linear;
分開分析：
transition-property: width,font-size;/*要過渡的屬性*/
transition-duration: 1s;/*過渡進(jìn)行的時(shí)間*/
transition-delay: 1s;/*過渡延遲兴泥，經(jīng)過多少時(shí)間以后才開始過渡*/
transition-timing-function: linear;/*過渡運(yùn)行曲線.勻速*/
關(guān)于transition-timing-function:
/*transition: 1s linear; 勻速*/
/*transition: 1s ease; 慢快慢（先加速，后減速）*/
/*transition: 1s ease-in; 勻加速*/
transition: 1s ease-out; /*勻減速*/
2虾宇、局限性
transition的優(yōu)點(diǎn)在于簡單易用搓彻，但是它有幾個(gè)很大的局限。
（1）transition需要事件觸發(fā)嘱朽，所以沒法在網(wǎng)頁加載時(shí)自動(dòng)發(fā)生旭贬。
（2）transition是一次性的，不能重復(fù)發(fā)生搪泳，除非一再觸發(fā)稀轨。
（3）transition只能定義開始狀態(tài)和結(jié)束狀態(tài)，不能定義中間狀態(tài)岸军，也就是說只有兩個(gè)狀態(tài)奋刽。
（4）一條transition規(guī)則，只能定義一個(gè)屬性的變化艰赞，不能涉及多個(gè)屬性佣谐。
CSS Animation就是為了解決這些問題而提出的。
2方妖、animation
CSS3的animation屬性可以像Flash制作動(dòng)畫一樣狭魂，通過控制關(guān)鍵幀來控制動(dòng)畫的每一步，實(shí)現(xiàn)更為復(fù)雜的動(dòng)畫效果。ainimation實(shí)現(xiàn)動(dòng)畫效果主要由兩部分組成：
1）通過類似Flash動(dòng)畫中的幀來聲明一個(gè)動(dòng)畫雌澄；
2）在animation屬性中調(diào)用關(guān)鍵幀聲明的動(dòng)畫斋泄。
Note：animation屬性到目前位置得到了大多數(shù)瀏覽器的支持，但是镐牺，需要添加瀏覽器前綴哦炫掐！需要添加瀏覽器前綴哦！需要添加瀏覽器前綴哦睬涧！
1募胃、用法animation: move 4s 1s linear infinite alternate;//綜合寫法
分開分析
animation-name: move; /*動(dòng)畫名稱自己喜歡就好*/
animation-duration: 4s;/*動(dòng)畫全過程用的時(shí)間*/
animation-delay: 1s;/*動(dòng)畫延遲，經(jīng)過多少時(shí)間開始運(yùn)動(dòng)*/
animation-timing-function: linear;/*動(dòng)畫運(yùn)動(dòng)曲線*/
animation-iteration-count: infinite;/*播放次數(shù)宙地，可以給次數(shù)摔认，沒有單位，infinite無限循環(huán)*/
animation-direction: alternate;/*是否反向播放動(dòng)畫normal正常宅粥，alternate反向播放動(dòng)畫*/
animation-play-state: running;//開始運(yùn)動(dòng)
animation-play-state: paused;//暫停動(dòng)畫
2参袱、動(dòng)畫寫法!!!!!要加瀏覽器前綴!!!!!要加瀏覽器前綴!!!!!要加瀏覽器前綴!!!!!要加瀏覽器前綴!!!!!要加瀏覽器前綴
@-webkit-keyframes move {
0%{left:0; top: 0;}/*動(dòng)畫開始時(shí)的初始狀態(tài)，可以不寫*/
25%{left:400px; top: 0;}/*動(dòng)畫從0到25%的目的地*/
50%{left:400px; top: 300px;}
75%{left:0; top: 300px;}
0%{left:0; top: 0;} /*可以不寫秽梅，不寫也有默認(rèn)的抹蚀，是回到起點(diǎn)*/
}
/*動(dòng)畫的第二種定義方式*/
@-webkit-keyframes play {
from{ left:0; top: 0;}/*相當(dāng)于0%*/
to{ left: 400px; top: 0; }/*相當(dāng)于100%*/
}
3、放大倍數(shù)scale（應(yīng)用在transition中）
@-webkit-keyframes move {
25%{transform: scale(1.2);}//scale表示放大倍數(shù)默認(rèn)是1.
50%{transform: scale(1.5);}
75%{transform: scale(1.2);}
}
