第一步，@keyframes 定義動(dòng)畫規(guī)則沦泌，包括動(dòng)畫名稱以及起始/結(jié)束樣式辽慕。
語法.
@keyframes 動(dòng)畫名稱{
? ? from {樣式1，樣式2赦肃，溅蛉。。他宛。}
? ? to {樣式1船侧，樣式2，厅各。镜撩。。}
}
亦可
@keyframes 動(dòng)畫名稱{
? ? 0% {樣式1队塘，樣式2袁梗，。憔古。遮怜。}
? ? 60% {樣式1，樣式2鸿市，锯梁。。焰情。}
? ? …….
? ? 100% {樣式1陌凳，樣式2，内舟。合敦。。}
}
可用top验游，bottom充岛，left，right定位批狱，使位置改變裸准。
補(bǔ)充說明.?
IE10及以上，Opera赔硫，F(xiàn)irefox炒俱，Chrome，Safari支持@keyframes規(guī)則及animation屬性。
部分特殊內(nèi)核的瀏覽器需加前綴权悟，如chrome和safari的內(nèi)核是webkit砸王，需加-webkit-前綴。
關(guān)于瀏覽器內(nèi)核峦阁，可參考鏈接?各主流瀏覽器介紹
第二步谦铃，animation為元素綁定動(dòng)畫，以及設(shè)置動(dòng)畫持續(xù)時(shí)長(zhǎng)等屬性榔昔。
語法.
選擇器 {
? ? animation:動(dòng)畫名稱 5s; /* 時(shí)長(zhǎng)默認(rèn)為0驹闰，不定義則動(dòng)畫不生效 */
? ? -moz-animation:動(dòng)畫名稱 5s; /* firefox */
? ? -webkit-animation:動(dòng)畫名稱 5s; /* Chrome，Safari */
? ? -o-animation:? 動(dòng)畫名稱 5s; /* Opera */
}
補(bǔ)充說明.
animation為簡(jiǎn)寫形式撒会，默認(rèn)值：none 0 ease 0 1 normal嘹朗，其中包含：
1. animation-name：keyframe規(guī)則名稱，默認(rèn)none(無動(dòng)畫)
2. animation-duration：定義動(dòng)畫完成一個(gè)周期需要多長(zhǎng)時(shí)間诵肛，可以s/ms為單位屹培。默認(rèn)0(無動(dòng)畫)
3. animation-timing-function：規(guī)定動(dòng)畫的速度曲線，如勻速怔檩。默認(rèn)ease褪秀。
? ? a. linear：勻速
? ? b. ease：低速開始，然后加快薛训，結(jié)束前變慢
? ? c. ease-in：低速開始
? ? d. ease-out：低速結(jié)束
? ? e. ease-in-out：以低速開始和結(jié)束
? ? f. cubic-bezier(n,n,n,n)：自定義曲線媒吗，可能值為從0到1
4. animation-delay：延時(shí)播放，允許負(fù)值(使動(dòng)畫馬上開始许蓖，但是動(dòng)畫會(huì)跳過負(fù)值時(shí)間蝴猪。比如過delay-2，duration5膊爪，那么動(dòng)畫會(huì)直接從2秒之后開始播放)
5. animation-iteration-count：規(guī)定動(dòng)畫播放的次數(shù)，默認(rèn)1嚎莉，也可指定為infinite(無限次播放)
6. animation-direction：規(guī)定是否輪流反向播放動(dòng)畫米酬，默認(rèn)normal。指定為alternate時(shí)趋箩，動(dòng)畫輪流反向播放(奇數(shù)135正常播放赃额，偶數(shù)反向播放)
額外屬性
animation-fill-mode： 動(dòng)畫開始前或結(jié)束后，元素是否填充叫确√迹可取值如下：
? ? a. none：不改變默認(rèn)行為。
? ? b. forwards: 動(dòng)畫結(jié)束后竹勉，以最后一幀(to)作為填充
????c. backwards：動(dòng)畫開始前(animation-delay時(shí))飞盆，以初始幀(from)作為填充
? ? d. both：應(yīng)用forwards和backwards。
本文內(nèi)容參考了w3cschool 動(dòng)畫教程w3school CSS3動(dòng)畫教程
