CSS3動(dòng)畫(huà)animation相關(guān)屬性與關(guān)鍵幀規(guī)則keyframes的詳細(xì)介紹

我昨天寫(xiě)三維正方體的時(shí)候，就用到了動(dòng)畫(huà)的語(yǔ)法

今天就來(lái)系統(tǒng)復(fù)習(xí)一下
過(guò)渡transition有著它的局限性
雖然簡(jiǎn)單，但是它只能在兩個(gè)狀態(tài)之間改變
并且它需要事件的驅(qū)動(dòng)才能夠進(jìn)行
不能夠自己運(yùn)動(dòng)
所以為了解決這樣的問(wèn)題
我們需要animation動(dòng)畫(huà)

動(dòng)畫(huà)

若想實(shí)現(xiàn)動(dòng)畫(huà)效果
僅僅有animation屬性是不夠的
我們還需要@keyframes規(guī)則
先來(lái)看一個(gè)例子

p class="demo"></p>

.demo { width: 100px; height: 100px; background-color: gold;}.demo:hover { animation: change 2s linear;}@keyframes change {
 0% { background-color: red; }
 50% { background-color: purple; }
 100% { background-color: lime; }}

當(dāng)鼠標(biāo)懸浮時(shí)，元素先變紅然后過(guò)渡到紫色有過(guò)渡到綠色

我們先來(lái)看看@keyframes 規(guī)則

keyframes

在@keyframes中，我們定義動(dòng)畫(huà)關(guān)鍵幀
然后animation會(huì)按照keyframes關(guān)鍵幀里我們指定的幀狀態(tài)進(jìn)行過(guò)渡執(zhí)行
0% - 100% 就代表動(dòng)畫(huà)的時(shí)間過(guò)渡
規(guī)則中的0%和100%，
可以替換成from和to關(guān)鍵字

@keyframes xxx { from { ......
 }
 to {
 ......
 }
}

如果我們省略了起始幀，瀏覽器會(huì)按照它最初的樣式進(jìn)行過(guò)渡

@keyframes change {
 100% { background-color: lime; }}

除此之外，我們還可以把相同的幀寫(xiě)在一起像這樣

@keyframes change { from,to { background-color: red; }
 50% { background-color: blue; }}

animation

animation是一個(gè)復(fù)合屬性，有以下子屬性

這個(gè)復(fù)合屬性比我們的transition要復(fù)雜一些
前四個(gè)屬性就不多解釋了，類似于我們的transition
忘了的同學(xué)，戳這里->傳送門(mén)

animation-iteration-count動(dòng)畫(huà)播放次數(shù)我們除了填寫(xiě)數(shù)字之外
還可以使用一個(gè)常用的關(guān)鍵字infinite無(wú)限循環(huán)

animation-direction除了normal以外還有如下屬性值

通過(guò)一個(gè)例子來(lái)解釋

.demo { width: 100px; height: 100px; background-color: gold;}.demo:hover { animation: change 1s 2 linear;}@keyframes change { to { width: 200px; }}

默認(rèn)normal：

兩次測(cè)試動(dòng)畫(huà)：
100px -> 200px
100px -> 200px

.demo:hover { animation: change 1s 2 linear reverse; /*改*/}

reverse：

兩次測(cè)試動(dòng)畫(huà)：
200px -> 100px
200px -> 100px

.demo:hover { animation: change 1s 2 linear alternate; /*改*/}

alternate：

兩次測(cè)試動(dòng)畫(huà)：
100px -> 200px
200px -> 100px

.demo:hover { animation: change 1s 2 linear alternate-reverse; /*改*/}

alternate-reverse：

兩次測(cè)試動(dòng)畫(huà)：
200px -> 100px
100px -> 200px

animation-fill-mode

下面我要講的兩個(gè)屬性都不是animation的子屬性
所以不能寫(xiě)在animation中

animation-fill-mode規(guī)定對(duì)象動(dòng)畫(huà)時(shí)間之外的狀態(tài)，默認(rèn)“none”
除了none以外還有如下屬性值

forwards
這個(gè)屬性還是蠻有用的
還是我們上面的例子

.demo:hover { animation: change 1s linear; /*改*/
 animation-fill-mode: forwards; /*改*/}

我們發(fā)現(xiàn)1s之后，元素并沒(méi)有回到最初的100px，而是保持了我們最后一幀的200px狀態(tài)

backwards
理解這個(gè)屬性，我們需要先加一個(gè)延時(shí)

.demo:hover { animation: change 1s linear 1s; /*改*/
 /*animation-fill-mode: backwards;*/ /*待增*/}@keyframes change { from { /*增*/
 width: 150px; }
 to { width: 200px; }}

我就不配圖了
我們發(fā)現(xiàn)鼠標(biāo)懸浮后，1s后瞬間變?yōu)?50px，然后再過(guò)渡到200px
hover-0s -> 1s -> 2s
100px ->瞬變150px –> 過(guò)渡到200px

現(xiàn)在增加backwards

.demo:hover { animation: change 1s linear 1s; /*改*/
 animation-fill-mode: backwards; /*增*/}

這回我們發(fā)現(xiàn)鼠標(biāo)懸浮的一瞬間就變?yōu)?5px，然后1s后過(guò)渡到200px
hover-0s -> 1s -> 2s
瞬變150px ->150px –> 過(guò)渡到200px
這就是backwards的作用，延遲前就應(yīng)用第一幀動(dòng)畫(huà)的樣式，然后準(zhǔn)備過(guò)渡

animation-play-state

animation-play-state 指定動(dòng)畫(huà)的運(yùn)行或暫停。默認(rèn) “running”
除了running還有paused
利用這個(gè)屬性再配合js我們可以控制動(dòng)畫(huà)的暫停和運(yùn)行

demo.style.animationPlayState = "paused";

今天的動(dòng)畫(huà)就先寫(xiě)這么多，感覺(jué)寫(xiě)了很長(zhǎng)時(shí)間
日后再總結(jié)動(dòng)畫(huà)相關(guān)的性能問(wèn)題

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com