柚子快報邀請碼778899分享：前端 CSS的動畫效果

http://yzkb.51969.com/

動畫效果

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

animation參數(shù)值

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

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

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

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

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

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

案例

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

?

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

案例三：元素沿著正方形軌跡移動

案例四：西游記效果

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

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

柚子快報邀請碼778899分享：前端 CSS的動畫效果

http://yzkb.51969.com/

好文推薦