CSS3動(dòng)畫

CSS3動(dòng)畫屬性

在CSS3中粱哼，動(dòng)畫效果使用animation屬性來實(shí)現(xiàn)季二。animation屬性和transition屬性功能是相同的，都是通過改變?cè)氐摹皩傩灾怠眮韺?shí)現(xiàn)動(dòng)畫效果揭措。但是這兩者又有很大的區(qū)別：transition屬性只能通過指定屬性的開始值與結(jié)束值胯舷，然后在這兩個(gè)屬性值之間進(jìn)行平滑過渡來實(shí)現(xiàn)動(dòng)畫效果，因此只能實(shí)現(xiàn)簡單的動(dòng)畫效果绊含。animation屬性則通過定義多個(gè)關(guān)鍵幀以及定義每個(gè)關(guān)鍵幀中元素的屬性值來實(shí)現(xiàn)復(fù)雜的動(dòng)畫效果

@keyframes簡介

使用animation屬性定義CSS3動(dòng)畫需要2步：
（1）定義動(dòng)畫桑嘶；
（2）調(diào)用動(dòng)畫；
在CSS3中躬充，在使用動(dòng)畫之前逃顶，我們必須使用@keyframes規(guī)則定義動(dòng)畫。
語法：

<style type="text/css">
@keyframes 動(dòng)畫名 {
    0% {
        ……
    }
    100% {
        …… 
    }
}
</style>

說明：0%表示動(dòng)畫的開始充甚，100%表示動(dòng)畫的結(jié)束以政。0%和100%是必須的，不過在一個(gè)@keyframes規(guī)則中可以由多個(gè)百分比構(gòu)成伴找，每一個(gè)百分比都可以定義自身的CSS樣式盈蛮，從而形成一系列的動(dòng)畫效果
小技巧：使用@keyframes規(guī)則時(shí)，如果僅僅只有0%和100%這兩個(gè)百分比的話技矮，這時(shí)0%和100%還可以使用關(guān)鍵詞from和to來代表眉反，其中0%對(duì)應(yīng)的是from，100%對(duì)應(yīng)的是to
舉例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS3 @keyframes</title>
    <style type="text/css">
        @-webkit-keyframes mycolor
        {
            0%{background-color:red;}
            30%{background-color:blue;}
            60%{background-color:yellow;}
            100%{background-color:green;}
        }
        div
        {
            width:100px;
            height:100px;
            border-radius:50px;
            background-color:red;
        }
        div:hover
        {
            -webkit-animation-name:mycolor;
            -webkit-animation-duration:5s;
            -webkit-animation-timing-function:linear;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

分析：
- （1）定義動(dòng)畫
- 這里我們使用@keyframes規(guī)則定義了一個(gè)名為mycolor的動(dòng)畫穆役，剛剛開始時(shí)背景顏色為紅色寸五，從0%到30%之間背景顏色從紅色變?yōu)樗{(lán)色，然后從30%到60%之間背景顏色從藍(lán)色變?yōu)辄S色耿币，最后在60%到100%之間背景顏色從藍(lán)色變?yōu)榫G色梳杏。動(dòng)畫執(zhí)行完畢，背景顏色回歸紅色（初始值）
- 很多新手會(huì)有疑問淹接，這些百分比是什么意思十性，是相對(duì)什么來說的呢？哪還有什么塑悼，肯定是相對(duì)“持續(xù)時(shí)間animation-duration啦劲适！例如這個(gè)例子里面，我們定義持續(xù)時(shí)間為5s厢蒜，則0%指的是0s（開始時(shí)）霞势，30%指的是1.5s的時(shí)候烹植，60%指的是3s的時(shí)候，100%則指的是5s（結(jié)束時(shí)）愕贡。假如我們定義持續(xù)時(shí)間為10s草雕，那么0%指的是0s（開始時(shí)），30%指的是3s的時(shí)候固以，60%指的是6s的時(shí)候墩虹，而100%則指的是10s（結(jié)束時(shí)）以此類推
- （2）調(diào)用動(dòng)畫
- 我們可以使用@keyframes規(guī)則定義動(dòng)畫，但是這樣定義的動(dòng)畫并不會(huì)自動(dòng)執(zhí)行憨琳，我們還需要“調(diào)用動(dòng)畫”诫钓，這樣動(dòng)畫才會(huì)生效。其實(shí)這就跟JavaScript的函數(shù)一樣篙螟，首先必須定義函數(shù)尖坤，然后只有調(diào)用函數(shù)，函數(shù)才會(huì)執(zhí)行生效闲擦。這個(gè)例子中慢味，我們?cè)O(shè)置在鼠標(biāo)移動(dòng)到div元素時(shí)（div:hover）使用animation-name屬性調(diào)用動(dòng)畫名，然后使用animation-duration屬性定義動(dòng)畫持續(xù)總時(shí)間墅冷、animation-timing-function屬性定義動(dòng)畫函數(shù)等

調(diào)用動(dòng)畫animation-name

在CSS3中纯路，使用@keyframes規(guī)則定義的動(dòng)畫并不會(huì)自動(dòng)執(zhí)行，我們還需要使用animation-name屬性來調(diào)用動(dòng)畫寞忿，之后動(dòng)畫才會(huì)生效驰唬。
語法：animation-name：動(dòng)畫名;
說明：注意，animation-name 調(diào)用的動(dòng)畫名需要和@keyframes規(guī)則定義的動(dòng)畫名稱完全一致（區(qū)分大小寫）腔彰，如果不一致將不具有任何動(dòng)畫效果

持續(xù)時(shí)間animation-duration

在CSS3中叫编，我們可以使用animation-duration屬性來設(shè)置動(dòng)畫的持續(xù)時(shí)間，也就是完成從0%到100%所使用的總時(shí)間霹抛。animation-duration屬性跟CSS3過渡中的transition-duration屬性相似
語法：animation-duration:時(shí)間;
說明：animation-duration屬性取值是一個(gè)時(shí)間搓逾，單位為s（秒），可以為小數(shù)如0.5s
CSS3動(dòng)畫很多時(shí)候都是跟CSS3變形結(jié)合起來杯拐，然后實(shí)現(xiàn)絢麗復(fù)雜的動(dòng)畫效果

播放方式animation-timing-function

在CSS3中霞篡，我們可以使用animation-timing-function屬性來設(shè)置動(dòng)畫的播放方式，所謂的“播放方式”主要用來指定動(dòng)畫在播放時(shí)間內(nèi)的速率
語法：animation-timing-function：取值;
說明：animation-timing-function屬性取值跟transition-timing-function屬性取值一樣端逼，共有5種朗兵，具體如下：

animation-timing-function屬性取值
舉例：

<!DOCTYPE html> 
<html lang="en">
<head>
    <title>CSS3 animation-timing-function屬性</title>
    <style type="text/css">
        @-webkit-keyframes mytransform
        {
            0%{ }
            100%{width:300px;}
        }
        div
        {
            width:100px;
            height:50px;
            text-align:center;
            line-height:50px;
            border-radius:0;
            background-color:#14C7F3;
            -webkit-animation-name:mytransform;
            -webkit-animation-duration:5s;
            -webkit-animation-timing-function:linear;
        }
        div+div
        {
            margin-top:10px;
        }
        #div1{-webkit-animation-timing-function:linear;}
        #div2{-webkit-animation-timing-function:ease;}
        #div3{-webkit-animation-timing-function:ease-in;}
        #div4{-webkit-animation-timing-function:ease-out;}
        #div5{-webkit-animation-timing-function:ease-in-out}
    </style>
</head>
<body>
    <div id="div1">linear</div>
    <div id="div2">ease</div>
    <div id="div3">ease-in</div>
    <div id="div4">ease-out</div>
    <div id="div5">ease-in-out</div>
</body>
</html>

通過這個(gè)例子，我們可以直觀地比較出這5種播放方式的不同顶滩。大家在實(shí)際開發(fā)余掖，根據(jù)自己想要的效果自行選取哪一種播放方式。

延遲時(shí)間animation-delay

在CSS3中礁鲁，我們可以使用animation-delay屬性來定義動(dòng)畫播放的延遲時(shí)間盐欺。其中赁豆，animation-delay屬性跟CSS3過渡中的transition-delay屬性相似
語法：animation-delay:時(shí)間;
說明：animation-delay屬性取值是一個(gè)時(shí)間，單位為s（秒）找田，可以為小數(shù)如0.5s
animation-delay屬性默認(rèn)值為0歌憨，也就是說當(dāng)我們沒有設(shè)置animation-delay屬性時(shí)着憨，CSS3動(dòng)畫就沒有延遲時(shí)間

播放次數(shù)animation-iteration-count

在CSS3中墩衙，我們可以使用animation-iteration-count屬性來定義動(dòng)畫的播放次數(shù)。
語法：animation-iteration-count取值;
說明：animation-iteration-count屬性取值有2種：
（1）正整數(shù)甲抖；
（2）infinite漆改；
animation-iteration-count屬性默認(rèn)值為1。也就是默認(rèn)情況下准谚，動(dòng)畫從開始到結(jié)束只播放一次挫剑。“animation-iteration-count:n”表示動(dòng)畫播放n次柱衔，n為正整數(shù)樊破；當(dāng)animation-iteration-count屬性取值為infinite時(shí)，動(dòng)畫會(huì)無限次地循環(huán)播放

播放方向animation-direction

在CSS3中唆铐，我們可以使用animation-direction屬性定義動(dòng)畫的播放方向哲戚。
語法：animation-direction取值;
說明：animation-direction屬性取值如下：

animation-direction屬性取值

動(dòng)畫播放狀態(tài)animation-play-state

在CSS3中，我們可以使用animation-play-state屬性來定義動(dòng)畫的播放狀態(tài)艾岂。
語法：animation-play-state取值;
說明：animation-play-state屬性取值只有2個(gè)：running和paused
（1）running 播放動(dòng)畫（默認(rèn)值）
（2）paused 暫停動(dòng)畫

時(shí)間外屬性animation-fill-mode

在CSS3中顺少，我們可以使用animation-fill-mode屬性定義在動(dòng)畫開始之前和動(dòng)畫結(jié)束之后發(fā)生的事情
語法：animation-fill-mode取值;
說明：animation-fill-mode屬性取值如下：

animation-fill-mode屬性取值
舉例

<!DOCTYPE html> 
<html lang="en">
<head>
    <title>CSS3 animation-fill-mode屬性</title>
    <style type="text/css">
        @-webkit-keyframes mytranslate
        {
            0%{}
            100%{-webkit-transform:translateX(100px);}
        }
        div:not(#container)
        {
            width:40px;
            height:40px;
            border-radius:20px;
            background-color:red;
            -webkit-animation-name:mytranslate;
            -webkit-animation-timing-function:linear;
            -webkit-animation-duration:2s;
        }
        #div2
        {
            -webkit-animation-fill-mode:forwards;
        }
        #div3
        {
            -webkit-animation-fill-mode:backwards;
        }
        #div4
        {
            -webkit-animation-fill-mode:both;
        }
        #container
        {
            display:inline-block;
            width:140px;
            border:1px solid silver;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="div1"></div>
        <div id="div2"></div>
        <div id="div3"></div>
        <div id="div4"></div>
    </div>
</body>
</html>

一般情況下，對(duì)于animation-fill-mode屬性王浴，我們只會(huì)用到forwards和backwards這兩個(gè)屬性值脆炎。而對(duì)于如何理解“animation-fill-mode:both;”，可以找度娘親熱一下氓辣，反正這個(gè)屬性值也沒什么卵用