柚子快報(bào)邀請(qǐng)碼778899分享：前端 CSS的動(dòng)畫效果

http://yzkb.51969.com/

動(dòng)畫效果

語(yǔ)法： 創(chuàng)建動(dòng)畫：@keyframes 調(diào)用動(dòng)畫：animation

animation參數(shù)值

參數(shù)值效果animation-name規(guī)定 @keyframes 動(dòng)畫的名稱。animation-duration規(guī)定動(dòng)畫完成一個(gè)周期所花費(fèi)的秒或毫秒。默認(rèn)是 0animation-timing-function規(guī)定動(dòng)畫的速度曲線。默認(rèn)是 "ease"animation-delay規(guī)定動(dòng)畫何時(shí)開(kāi)始。默認(rèn)是 0animation-iteration-count規(guī)定動(dòng)畫被播放的次數(shù)（number類型）。默認(rèn)是 1，（infinite: 無(wú)限次）animation-direction規(guī)定動(dòng)畫是否在下一周期逆向地播放。默認(rèn)是 "normal" ，‘a(chǎn)lternate'animation-play-state規(guī)定動(dòng)畫是否正在運(yùn)行或暫停。默認(rèn)是 "running",'paused'animation-fill-mode規(guī)定對(duì)象動(dòng)畫時(shí)間之外的狀態(tài).forwards,backwards默認(rèn)值

1、通過(guò) @keyframes(關(guān)鍵幀動(dòng)畫) 規(guī)則，您能夠創(chuàng)建動(dòng)畫。

2、創(chuàng)建動(dòng)畫的原理是，將一套 CSS 樣式逐漸變化為另一套樣式。在動(dòng)畫過(guò)程中，能夠多次改變這套 CSS 樣式。

3、以百分比來(lái)規(guī)定改變發(fā)生的時(shí)間，或者通過(guò)關(guān)鍵詞 "from" 和 "to"，等價(jià)于 0% 和 100%。 0% 是動(dòng)畫的開(kāi)始時(shí)間，100% 動(dòng)畫的結(jié)束時(shí)間。

4、為了獲得最佳的瀏覽器支持，您應(yīng)該始終定義 0% 和 100% 選擇器。

5、在CSS樣式中，用animation屬性來(lái)應(yīng)用 @keyframes所定義的動(dòng)畫

案例

?案例一：元素平移加顏色漸變

?

?案例二：將元素移動(dòng)到某個(gè)位置，并且停在當(dāng)前位置

案例三：元素沿著正方形軌跡移動(dòng)

案例四：西游記效果

steps 有兩個(gè)參數(shù) 第一個(gè)表示分幾步執(zhí)行完 第二個(gè)有兩個(gè)值 start 第一幀是第一步動(dòng)畫結(jié)束 end 第一幀是第一步動(dòng)畫開(kāi)始

?案例五：風(fēng)車效果

柚子快報(bào)邀請(qǐng)碼778899分享：前端 CSS的動(dòng)畫效果

http://yzkb.51969.com/

好文推薦