CSS3中的animation與HTML5中的Canvas繪制動畫又不同，animation只應用在頁面上已存在的DOM元素上。

運用animation能創(chuàng)建自己想要的一些動畫效果，但是有點粗糙。

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

Keyframes具有其自己的語法規(guī)則，它的命名是由"@keyframes"開頭，后面緊接著是這個“動畫的名稱”加上一對花括號“{}”，括號中就是一些不同時間段樣式規(guī)則，有點像我們css的樣式寫法一樣。對于一個"@keyframes"中的樣式規(guī)則是由多個百分比構成的，如“0%”到"100%"之間，我們可以在這個規(guī)則中創(chuàng)建多個百分比，我們分別給每一個百分比中給需要有動畫效果的元素加上不同的屬性，從而讓元素達到一種在不斷變化的效果，比如說移動，改變元素顏色，位置，大小，形狀等，不過有一點需要注意的是，我們可以使用“from”“to”來代表一個動畫是從哪開始，到哪結束，也就是說這個 "from"就相當于"0%"而"to"相當于"100%",值得一說的是，其中"0%"不能像別的屬性取值一樣把百分比符號省略，我們在這里必須加上百分符號（“%”）如果沒有加上的話，我們這個keyframes是無效的，不起任何作用。

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

CSS3的animation類似于transition屬性，他們都是隨著時間改變元素的屬性值。他們主要區(qū)別是transition需要觸發(fā)一個事件(hover事件或click事件等)才會隨時間改變其css屬性；而animation在不需要觸發(fā)任何事件的情況下也可以顯式的隨著時間變化來改變元素css的屬性值，從而達到一種動畫的效果。

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
接下來一一介紹：

animation-name：

用來定義一個動畫的名稱，none為默認值，當值為none時，將沒有任何動畫效果。

animation-duration：

用來指定元素播放動畫所持續(xù)的時間長。

animation-timing-function：

動畫的播放方式，具有以下六種：ease;ease-in;ease-in-out;linear;cubic-bezier。

animation-delay：

指定元素動畫延遲的時間。

animation-iteration-count：

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

animation-direction：

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

animation-play-state：

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

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

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

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