CSS3中的animation與HTML5中的Canvas繪制動(dòng)畫(huà)又不同，animation只應(yīng)用在頁(yè)面上已存在的DOM元素上。

運(yùn)用animation能創(chuàng)建自己想要的一些動(dòng)畫(huà)效果，但是有點(diǎn)粗糙。

了解animation之前得知道"Keyframes",我們把他叫做“關(guān)鍵幀”。

Keyframes具有其自己的語(yǔ)法規(guī)則，它的命名是由"@keyframes"開(kāi)頭，后面緊接著是這個(gè)“動(dòng)畫(huà)的名稱”加上一對(duì)花括號(hào)“{}”，括號(hào)中就是一些不同時(shí)間段樣式規(guī)則，有點(diǎn)像我們css的樣式寫(xiě)法一樣。對(duì)于一個(gè)"@keyframes"中的樣式規(guī)則是由多個(gè)百分比構(gòu)成的，如“0%”到"100%"之間，我們可以在這個(gè)規(guī)則中創(chuàng)建多個(gè)百分比，我們分別給每一個(gè)百分比中給需要有動(dòng)畫(huà)效果的元素加上不同的屬性，從而讓元素達(dá)到一種在不斷變化的效果，比如說(shuō)移動(dòng)，改變?cè)仡伾?，位置，大小，形狀等，不過(guò)有一點(diǎn)需要注意的是，我們可以使用“from”“to”來(lái)代表一個(gè)動(dòng)畫(huà)是從哪開(kāi)始，到哪結(jié)束，也就是說(shuō)這個(gè) "from"就相當(dāng)于"0%"而"to"相當(dāng)于"100%",值得一說(shuō)的是，其中"0%"不能像別的屬性取值一樣把百分比符號(hào)省略，我們?cè)谶@里必須加上百分符號(hào)（“%”）如果沒(méi)有加上的話，我們這個(gè)keyframes是無(wú)效的，不起任何作用。

keyframes的單位只接受百分比值。

CSS3的animation類似于transition屬性，他們都是隨著時(shí)間改變?cè)氐膶傩灾?。他們主要區(qū)別是transition需要觸發(fā)一個(gè)事件(hover事件或click事件等)才會(huì)隨時(shí)間改變其css屬性；而animation在不需要觸發(fā)任何事件的情況下也可以顯式的隨著時(shí)間變化來(lái)改變?cè)豤ss的屬性值，從而達(dá)到一種動(dòng)畫(huà)的效果。

animation主要有以下幾種屬性：

1.animation-name;

2.animation-duration;

3.animation-timing-function;

4.animation-delay;

5.animation-iteration-count;

6.animation-direction;

7.animation-play-state
接下來(lái)一一介紹：

animation-name：

用來(lái)定義一個(gè)動(dòng)畫(huà)的名稱，none為默認(rèn)值，當(dāng)值為none時(shí)，將沒(méi)有任何動(dòng)畫(huà)效果。

animation-duration：

用來(lái)指定元素播放動(dòng)畫(huà)所持續(xù)的時(shí)間長(zhǎng)。

animation-timing-function：

動(dòng)畫(huà)的播放方式，具有以下六種：ease;ease-in;ease-in-out;linear;cubic-bezier。

animation-delay：

指定元素動(dòng)畫(huà)延遲的時(shí)間。

animation-iteration-count：

指定元素播放動(dòng)畫(huà)的循環(huán)次數(shù)，其可以取值為數(shù)字，其默認(rèn)值為“1”；infinite為無(wú)限次數(shù)循環(huán)。

animation-direction：

用來(lái)指定元素動(dòng)畫(huà)播放的方向，其只有兩個(gè)值，默認(rèn)值為normal，如果設(shè)置為normal時(shí)，動(dòng)畫(huà)的每次循環(huán)都是向前播放；另一個(gè)值是alternate，他的作用是，動(dòng)畫(huà)播放在第偶數(shù)次向前播放，第奇數(shù)次向反方向播放。

animation-play-state：

用來(lái)控制元素動(dòng)畫(huà)的播放狀態(tài)。主要有兩個(gè)值，running和paused。running為默認(rèn)值?？梢酝ㄟ^(guò)paused將正在播放的動(dòng)畫(huà)停下了，也可以通過(guò)running將暫停的動(dòng)畫(huà)重新播放，如果暫時(shí)了動(dòng)畫(huà)的播放，元素的樣式將回到最原始設(shè)置狀態(tài)。

下面展示的是如何調(diào)用animation：

.demo {     width: 50px;     height: 50px;     margin-left: 100px;     background: blue;     -webkit-animation-name:'ani-name';/*動(dòng)畫(huà)屬性名，也就是我們前面keyframes定義的動(dòng)畫(huà)名*/     -webkit-animation-duration: 10s;/*動(dòng)畫(huà)持續(xù)時(shí)間*/     -webkit-animation-timing-function: ease-in-out; /*動(dòng)畫(huà)頻率，和transition-timing-function是一樣的*/     -webkit-animation-delay: 2s;/*動(dòng)畫(huà)延遲時(shí)間*/     -webkit-animation-iteration-count: 10;/*定義循環(huán)資料，infinite為無(wú)限次*/     -webkit-animation-direction: alternate;/*定義動(dòng)畫(huà)方式*/}

.demo {     -webkit-animation:'ani-name' 10s ease-in-out 2s 10 alternate;}