日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

創(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è)簡單的 @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)畫屬性的簡寫屬性。

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

animation-name

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

示例代碼如下：

注意：要想讓動(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 屬性的可選值如下表所示：

示例代碼如下：

    


    
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)（樣式），屬性的可選值如下：

示例代碼如下：

    


    
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ù)，屬性的可選值如下：

示例代碼如下：

    


    
1
    
infinite

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

animation-direction

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

示例代碼如下：

    


    
reverse
    
alternate

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

animation-play-state

animation-play-state 屬性用來設(shè)置動(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è)屬性的簡寫形式，通過 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ù)分別對應(yīng)上面介紹的各個(gè)屬性，如果省略其中的某個(gè)或多個(gè)值，則將使用該屬性對應(yīng)的默認(rèn)值。

示例代碼如下：

    


    
animation

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