CSS3動畫animation相關屬性與關鍵幀規則keyframes的詳細介紹

我昨天寫三維正方體的時候，就用到了動畫的語法

今天就來系統復習一下
過渡transition有著它的局限性
雖然簡單，但是它只能在兩個狀態之間改變
并且它需要事件的驅動才能夠進行
不能夠自己運動
所以為了解決這樣的問題
我們需要animation動畫

動畫

若想實現動畫效果
僅僅有animation屬性是不夠的
我們還需要@keyframes規則
先來看一個例子

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; }}

當鼠標懸浮時，元素先變紅然后過渡到紫色有過渡到綠色

我們先來看看@keyframes 規則

keyframes

在@keyframes中，我們定義動畫關鍵幀
然后animation會按照keyframes關鍵幀里我們指定的幀狀態進行過渡執行
0% - 100% 就代表動畫的時間過渡
規則中的0%和100%，
可以替換成from和to關鍵字

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

如果我們省略了起始幀，瀏覽器會按照它最初的樣式進行過渡

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

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

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

animation

animation是一個復合屬性，有以下子屬性

這個復合屬性比我們的transition要復雜一些
前四個屬性就不多解釋了，類似于我們的transition
忘了的同學，戳這里->傳送門

animation-iteration-count動畫播放次數我們除了填寫數字之外
還可以使用一個常用的關鍵字infinite無限循環

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

通過一個例子來解釋

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

默認normal：

兩次測試動畫：
100px -> 200px
100px -> 200px

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

reverse：

兩次測試動畫：
200px -> 100px
200px -> 100px

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

alternate：

兩次測試動畫：
100px -> 200px
200px -> 100px

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

alternate-reverse：

兩次測試動畫：
200px -> 100px
100px -> 200px

animation-fill-mode

下面我要講的兩個屬性都不是animation的子屬性
所以不能寫在animation中

animation-fill-mode規定對象動畫時間之外的狀態，默認“none”
除了none以外還有如下屬性值

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

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

我們發現1s之后，元素并沒有回到最初的100px，而是保持了我們最后一幀的200px狀態

backwards
理解這個屬性，我們需要先加一個延時

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

我就不配圖了
我們發現鼠標懸浮后，1s后瞬間變為150px，然后再過渡到200px
hover-0s -> 1s -> 2s
100px ->瞬變150px –> 過渡到200px

現在增加backwards

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

這回我們發現鼠標懸浮的一瞬間就變為15px，然后1s后過渡到200px
hover-0s -> 1s -> 2s
瞬變150px ->150px –> 過渡到200px
這就是backwards的作用，延遲前就應用第一幀動畫的樣式，然后準備過渡

animation-play-state

animation-play-state 指定動畫的運行或暫停。默認 “running”
除了running還有paused
利用這個屬性再配合js我們可以控制動畫的暫停和運行

demo.style.animationPlayState = "paused";

今天的動畫就先寫這么多，感覺寫了很長時間
日后再總結動畫相關的性能問題

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com