日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

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

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

@keyframes 規(guī)則

要創(chuàng)建 CSS 動畫，您首先需要了解 @keyframes 規(guī)則，@keyframes 規(guī)則用來定義動畫各個階段的屬性值，類似于 flash 動畫中的關(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：表示動畫的名稱；
• from：定義動畫的開頭，相當(dāng)于 0%；
• percentage：定義動畫的各個階段，為百分比值，可以添加多個；
• to：定義動畫的結(jié)尾，相當(dāng)于 100%；
• properties：不同的樣式屬性名稱，例如 color、left、width 等等。

下面我們來看一個簡單的 @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;} 
}

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

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

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

animation-name

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

示例代碼如下：

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

animation-duration

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

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

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

animation-timing-function

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

示例代碼如下：

    


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

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

animation-fill-mode

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

示例代碼如下：

    


    
forwards

animation-delay

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

animation-delay: time;

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

示例代碼如下：

    


    
0.5s
    
-0.5s

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

animation-iteration-count

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

示例代碼如下：

    


    
1
    
infinite

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

animation-direction

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

示例代碼如下：

    


    
reverse
    
alternate

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

animation-play-state

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

示例代碼如下：

    


    
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 幾個屬性的簡寫形式，通過 animation 屬性可以同時定義上述的多個屬性，語法格式如下：

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

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

示例代碼如下：

    


    
animation

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