第一步,@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)畫教程