新手都能做效果系列最后一個(gè)，CSS3屬性中有關(guān)于制作動畫的三個(gè)屬性：
transform,transition,animation
當(dāng)這幾篇文檔都能讀懂了；就可以發(fā)揮你天馬星空的想象寫動畫了；
在 CSS3 中創(chuàng)建動畫，需要學(xué)習(xí) @keyframes 規(guī)則昆稿。
@keyframes 規(guī)則用于創(chuàng)建動畫辫封。在 @keyframes 中規(guī)定某項(xiàng) CSS 樣式排监，就能創(chuàng)建由當(dāng)前樣式逐漸改為新樣式的動畫效果
@keyframes mymove{ //mymove自定義名
from{初始狀態(tài)屬性}
to{結(jié)束狀態(tài)屬性}
}
或
@keyframes mymove{
0%{初始狀態(tài)屬性}
100%{結(jié)束狀態(tài)屬性}
}（中間再可以添加關(guān)鍵幀）
@keyframes瀏覽器支持情況：
animation
當(dāng)然在 @keyframes 中創(chuàng)建動畫時(shí)狰右，請把它捆綁到某個(gè)選擇器，否則不會產(chǎn)生動畫效果舆床。animation復(fù)合屬性。檢索或設(shè)置對象所應(yīng)用的動畫特效嫁佳。兩個(gè)搭配才能產(chǎn)生動畫
首先說說animation和transition的區(qū)：
相同點(diǎn)：都是隨著時(shí)間改變元素的屬性值挨队。
不同點(diǎn)：
transition需要觸發(fā)一個(gè)事件(hover事件或click事件等)才會隨時(shí)間改變其css屬性；
而animation在不需要觸發(fā)任何事件的情況下也可以顯式的隨著時(shí)間變化來改變元素css的屬性值蒿往，從而達(dá)到一種動畫的效果盛垦，css3的animation就需要明確的動畫屬性值。
下面一一介紹他的屬性值：
1.animation-name 檢索或設(shè)置對象所應(yīng)用的動畫名稱
說明：必須與規(guī)則@keyframes配合使用瓤漏，eg:@keyframes mymove{} animation-name:mymove;
2.animation-duration 檢索或設(shè)置對象動畫的持續(xù)時(shí)間
說明：animation-duration:3s; 動畫完成使用的時(shí)間為3s
3.animation-timing-function 檢索或設(shè)置對象動畫的過渡類型
說明：
linear：線性過渡腾夯。等同于貝塞爾曲線(0.0, 0.0, 1.0, 1.0)
ease：平滑過渡。等同于貝塞爾曲線(0.25, 0.1, 0.25, 1.0)
ease-in：由慢到快蔬充。等同于貝塞爾曲線(0.42, 0, 1.0, 1.0)
ease-out：由快到慢蝶俱。等同于貝塞爾曲線(0, 0, 0.58, 1.0)
ease-in-out：由慢到快再到慢。等同于貝塞爾曲線(0.42, 0, 0.58, 1.0)
step-start:馬上跳到動畫每一結(jié)束楨的狀態(tài)
4.animation-delay 檢索或設(shè)置對象動畫延遲的時(shí)間
說明：animation-delay:0.5s; 動畫開始前延遲的時(shí)間為0.5s)
5.animation-iteration-count 檢索或設(shè)置對象動畫的循環(huán)次數(shù)
說明：
animation-iteration-count: infinite | number;
infinite：無限循環(huán)
number: 循環(huán)的次數(shù)
6.animation-direction 檢索或設(shè)置對象動畫在循環(huán)中是否反向運(yùn)動
說明：
normal：正常方向
reverse：反方向運(yùn)行
alternate：動畫先正常運(yùn)行再反方向運(yùn)行饥漫，并持續(xù)交替運(yùn)行
alternate-reverse：動畫先反運(yùn)行再正方向運(yùn)行榨呆，并持續(xù)交替運(yùn)行
7.animation-play-state 檢索或設(shè)置對象動畫的狀態(tài)
說明：
animation-play-state:running | paused;
running:運(yùn)動
paused: 暫停
animation-play-state:paused; 當(dāng)鼠標(biāo)經(jīng)過時(shí)動畫停止，鼠標(biāo)移開動畫繼續(xù)執(zhí)行
總結(jié)一下：
好吧說這么多庸队；大家應(yīng)該也還是一臉懵积蜻；還是上代碼怎么用大家就一目了然了；
本人覺得還是上圖更清晰彻消，這個(gè)寫注釋也沒法寫哈哈竿拆；最后給大家?guī)讉€(gè)小案例，提取碼：30cl ;
