通過《CSS過渡》一節(jié)的學(xué)習(xí)我們知道，利用 transition 屬性可以實(shí)現(xiàn)簡(jiǎn)單的過渡動(dòng)畫，但過渡動(dòng)畫僅能指定開始和結(jié)束兩個(gè)狀態(tài)，整個(gè)過程都是由特定的函數(shù)來控制的，不是很靈活。本節(jié)我們?cè)賮斫榻B一種更為復(fù)雜的動(dòng)畫 —— animation。

創(chuàng)新互聯(lián)公司基于分布式IDC數(shù)據(jù)中心構(gòu)建的平臺(tái)為眾多戶提供四川綿陽服務(wù)器托管 四川大帶寬租用 成都機(jī)柜租用 成都服務(wù)器租用。

CSS 中的動(dòng)畫類似于 flash 中的逐幀動(dòng)畫，表現(xiàn)細(xì)膩并且非常靈活，使用 CSS 中的動(dòng)畫可以取代許多網(wǎng)頁中的動(dòng)態(tài)圖像、Flash 動(dòng)畫或者 JavaScript 實(shí)現(xiàn)的特殊效果。

@keyframes 規(guī)則

要?jiǎng)?chuàng)建 CSS 動(dòng)畫，您首先需要了解 @keyframes 規(guī)則，@keyframes 規(guī)則用來定義動(dòng)畫各個(gè)階段的屬性值，類似于 flash 動(dòng)畫中的關(guān)鍵幀，語法格式如下：

@keyframes animationName {
    from {
        properties: value;
    }
    percentage {
        properties: value;
    }
    to {
        properties: value;
    }
}
// 或者
@keyframes animationName {
    0% {
        properties: value;
    }
    percentage {
        properties: value;
    }
    100% {
        properties: value;
    }
}

語法說明如下：

• animationName：表示動(dòng)畫的名稱；
• from：定義動(dòng)畫的開頭，相當(dāng)于 0%；
• percentage：定義動(dòng)畫的各個(gè)階段，為百分比值，可以添加多個(gè)；
• to：定義動(dòng)畫的結(jié)尾，相當(dāng)于 100%；
• properties：不同的樣式屬性名稱，例如 color、left、width 等等。

下面我們來看一個(gè)簡(jiǎn)單的 @keyframes 規(guī)則示例：

@keyframes ball {
    0% { top: 0px; left: 0px;}
    25% { top: 0px; left: 350px;}
    50% { top: 200px; left: 350px;}
    75% { top: 200px; left: 0px;}
    100% { top: 0px; left: 0px;} 
}

動(dòng)畫創(chuàng)建好后，還需要將動(dòng)畫應(yīng)用到指定的 HTML 元素。要將動(dòng)畫應(yīng)用到指定的 HTML 元素需要借助 CSS 屬性，CSS 中提供了如下所示的動(dòng)畫屬性：

• animation-name：設(shè)置需要綁定到元素的動(dòng)畫名稱；
• animation-duration：設(shè)置完成動(dòng)畫所需要花費(fèi)的時(shí)間，單位為秒或毫秒，默認(rèn)為 0；
• animation-timing-function：設(shè)置動(dòng)畫的速度曲線，默認(rèn)為 ease；
• animation-fill-mode：設(shè)置當(dāng)動(dòng)畫不播放時(shí)（動(dòng)畫播放完或延遲播放時(shí)）的狀態(tài)；
• animation-delay：設(shè)置動(dòng)畫開始之前的延遲時(shí)間，默認(rèn)為 0；
• animation-iteration-count：設(shè)置動(dòng)畫被播放的次數(shù)，默認(rèn)為 1；
• animation-direction：設(shè)置是否在下一周期逆向播放動(dòng)畫，默認(rèn)為 normal；
• animation-play-state：設(shè)置動(dòng)畫是正在運(yùn)行還是暫停，默認(rèn)是 running；
• animation：所有動(dòng)畫屬性的簡(jiǎn)寫屬性。

下面就來詳細(xì)介紹一下上述屬性的使用。

animation-name

animation-name 屬性用來將動(dòng)畫綁定到指定的 HTML 元素，屬性的可選值如下：

值	描述
keyframename	要綁定到 HTML 元素的動(dòng)畫名稱，可以同時(shí)綁定多個(gè)動(dòng)畫，動(dòng)畫名稱之間使用逗號(hào)進(jìn)行分隔
none	表示無動(dòng)畫效果，

示例代碼如下：

注意：要想讓動(dòng)畫成功播放，您還需要定義 animation-duration 屬性，否則會(huì)因?yàn)?animation-duration 屬性的默認(rèn)值為 0，導(dǎo)致動(dòng)畫并不會(huì)播放。

animation-duration

animation-duration 屬性用來設(shè)置動(dòng)畫完成一個(gè)周期所需要花費(fèi)的時(shí)間，單位為秒或者毫秒。示例代碼如下：

運(yùn)行結(jié)果如下圖所示：

提示：動(dòng)畫若想成功播放，必須要定義 animation-name 和 animation-duration 屬性。

animation-timing-function

animation-timing-function 屬性用來設(shè)置動(dòng)畫播放的速度曲線，通過速度曲線的設(shè)置可以使動(dòng)畫播放的更為平滑。animation-timing-function 屬性的可選值如下表所示：

值	描述
linear	動(dòng)畫從開始到結(jié)束的速度是相同的
ease	默認(rèn)值，動(dòng)畫以低速開始，然后加快，在結(jié)束前變慢
ease-in	動(dòng)畫以低速開始
ease-out	動(dòng)畫以低速結(jié)束
ease-in-out	動(dòng)畫以低速開始，并以低速結(jié)束
cubic-bezier(n, n, n, n)	使用 cubic-bezier() 函數(shù)來定義動(dòng)畫的播放速度，參數(shù)的取值范圍為 0 到 1 之間的數(shù)值

示例代碼如下：

    


    
ease
    
ease-in
    
ease-out
    
ease-in-out

運(yùn)行結(jié)果如下圖所示：

animation-fill-mode

animation-fill-mode 屬性用來設(shè)置當(dāng)動(dòng)畫不播放時(shí)（開始播放之前或播放結(jié)束之后）動(dòng)畫的狀態(tài)（樣式），屬性的可選值如下：

值	描述
none	不改變動(dòng)畫的默認(rèn)行為
forwards	當(dāng)動(dòng)畫播放完成后，保持動(dòng)畫最后一個(gè)關(guān)鍵幀中的樣式
backwards	在 animation-delay 所指定的時(shí)間段內(nèi)，應(yīng)用動(dòng)畫第一個(gè)關(guān)鍵幀中的樣式
both	同時(shí)遵循 forwards 和 backwards 的規(guī)則

示例代碼如下：

    


    
forwards

animation-delay

animation-delay 屬性用來定義動(dòng)畫開始播放前的延遲時(shí)間，單位為秒或者毫秒，屬性的語法格式如下：

animation-delay: time;

其中參數(shù) time 就是動(dòng)畫播放前的延遲時(shí)間，參數(shù) time 既可以為正值也可以為負(fù)值。參數(shù)值為正時(shí)，表示延遲指定時(shí)間開始播放；參數(shù)為負(fù)時(shí)，表示跳過指定時(shí)間，并立即播放動(dòng)畫。

示例代碼如下：

    


    
0.5s
    
-0.5s

運(yùn)行結(jié)果如下圖所示：

animation-iteration-count

animation-iteration-count 屬性用來定義動(dòng)畫播放的次數(shù)，屬性的可選值如下：

值	描述
n	使用具體數(shù)值定義動(dòng)畫播放的次數(shù)，默認(rèn)值為 1
infinite	表示動(dòng)畫無限次播放

示例代碼如下：

    


    
1
    
infinite

運(yùn)行結(jié)果如下圖所示：

animation-direction

animation-direction 屬性用來設(shè)置是否輪流反向播放動(dòng)畫，屬性的可選值如下：

值	描述
normal	以正常的方式播放動(dòng)畫
reverse	以相反的方向播放動(dòng)畫
alternate	播放動(dòng)畫時(shí)，奇數(shù)次（1、3、5 等）正常播放，偶數(shù)次（2、4、6 等）反向播放
alternate-reverse	播放動(dòng)畫時(shí)，奇數(shù)次（1、3、5 等）反向播放，偶數(shù)次（2、4、6 等）正常播放

示例代碼如下：

    


    
reverse
    
alternate

運(yùn)行結(jié)果如下圖所示：

animation-play-state

animation-play-state 屬性用來設(shè)置動(dòng)畫是播放還是暫停，屬性的可選值如下：

值	描述
paused	暫停動(dòng)畫的播放
running	正常播放動(dòng)畫

示例代碼如下：

    


    
running
    
paused

運(yùn)行結(jié)果如下圖所示：

animation

animation 屬性是 animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-fill-mode、animation-play-state 幾個(gè)屬性的簡(jiǎn)寫形式，通過 animation 屬性可以同時(shí)定義上述的多個(gè)屬性，語法格式如下：

animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state;

其中每個(gè)參數(shù)分別對(duì)應(yīng)上面介紹的各個(gè)屬性，如果省略其中的某個(gè)或多個(gè)值，則將使用該屬性對(duì)應(yīng)的默認(rèn)值。

示例代碼如下：

    


    
animation

運(yùn)行結(jié)果如下圖所示：