上篇CSS常用樣式（三）這篇博文中已經介紹過了CSS中具有動畫效果的transition、transform，今天來大概說說CSS中的animation。animation的加入會使得動畫效果更加樂觀。
animation
animation的實現需要通過keyframes來實現。keyframes（關鍵幀），類似於flash當中的關鍵幀。關鍵幀有其自己的語法規則，他的命名是由"@keyframes"開頭，后面緊接着是這個“動畫的名稱”加上一對花括號“{}”，括號中就是一些不同時間段樣式規則，有點像我們css的樣式寫法一樣。對於一個"@keyframes"中的樣式規則是由多個百分比構成的，如“0%”到"100%"之間，我們可以在這個規則中創建多個百分比，我們分別給每一個百分比中給需要有動畫效果的元素加上不同的屬性，從而讓元素達到一種在不斷變化的效果，比如說移動，改變元素顏色，位置，大小，形狀等。不過有一點需要注意的是，我們可以使用“fromt”“to”來代表一個動畫是從哪開始，到哪結束，也就是說這個 "from"就相當於"0%"而"to"相當於"100%",值得一說的是，其中"0%"不能像別的屬性取值一樣把百分比符號省略，我們在這里必須加上百分符號（“%”）如果沒有加上的話，我們這個keyframes是無效的，不起任何作用。因為keyframes的單位只接受百分比值。
不同瀏覽器下的寫法：
| 內核類型 | 寫法 |
|---|---|
| Webkit(Chrome/Safari) | -webkit-animation |
| Gecko(Firefox) | -moz-animation |
| Presto(Opera) | |
| Trident(IE) | -ms-animation |
| W3C | animation |
屬性說明：
1、animation-name:檢索或設置對象所應用的動畫名稱,必須與規則@keyframes配合使用。動畫名可自由取，語義化的更好
2、animation-duration：檢索或設置對象動畫的持續時間
3、animation-timing-function:檢索或設置對象動畫的過渡類型
取值：
linear：線性過渡。等同於貝塞爾曲線(0.0, 0.0, 1.0, 1.0)
ease：平滑過渡。等同於貝塞爾曲線(0.25, 0.1, 0.25, 1.0)
ease-in：由慢到快。等同於貝塞爾曲線(0.42, 0, 1.0, 1.0)
ease-out：由快到慢。等同於貝塞爾曲線(0, 0, 0.58, 1.0)
ease-in-out：由慢到快再到慢。等同於貝塞爾曲線(0.42, 0, 0.58, 1.0)
cubic-bezier(<number>, <number>, <number>, <number>)：特定的貝塞爾曲線類型，4個數值需在[0, 1]區間內
4、animation-iteration-count：檢索或設置對象動畫的循環次數
取值：
infinite：無限循環
number：指定對象動畫的具體循環次數
5、animation-direction：檢索或設置對象動畫在循環中是否反向運動
取值：
normal：正常方向
alternate：正常與反向交替
6、animation-play-state：檢索或設置對象動畫的狀態
running：運動
paused：暫停
7、animation-fill-mode：檢索或設置對象動畫時間之外的狀態
取值：
none：默認值。不設置對象動畫之外的狀態
forwards：設置對象狀態為動畫結束時的狀態
backwards：設置對象狀態為動畫開始時的狀態
both：設置對象狀態為動畫結束或開始的狀態
下面舉個例子綜合說明：
CSS代碼：
#animation { width: 250px; height: 250px; background-color: brown; opacity: 0.5; position:absolute; left:40%; overflow: hidden;
} #animation span { font-family: "微軟雅黑"; font-size: 20px; color: #ccc; opacity: 0; display: block; margin: 30px;
} #text1:hover { -moz-animation-play-state:paused;/*鼠標經過時暫停動畫*/ -webkit-animation-play-state:paused; -o-animation-play-state:paused; -ms-animation-play-state:paused; animation-play-state:paused;
} #text2:hover { -moz-animation-play-state:paused; -webkit-animation-play-state:paused; -o-animation-play-state:paused; -ms-animation-play-state:paused; animation-play-state:paused;
} #text1 { -webkit-animation-name:animation1;/*動畫名稱*/ -webkit-animation-duration:4s;/*動畫持續時間*/ -webkit-animation-timing-function:ease-in;/*變化由慢到快*/ -webkit-animation-delay: 2s;/*過了2S后開始動畫*/ -webkit-animation-iteration-count: infinite;/*設置動畫無限播放*/ -webkit-transform: translate(55px); animation-name:animation1; animation-delay: 4s; animation-timing-function: ease-in; animation-delay: 2s; animation-iteration-count: infinite; transform: translate(55px); -ms-animation-name:animation1; -ms-animation-duration:4s ; -ms-animation-timing-function: ease-in; -ms-animation-delay: 2s; -ms-animation-iteration-count: infinite; -ms-transform: translate(55px); -moz-animation-name:animation1; -moz-animation-delay:4s ; -moz-animation-timing-function: ease-in; -moz-animation-delay: 2s; -moz-animation-iteration-count: infinite; -moz-transform: translate(55px);
} #text2 { -webkit-animation-name:animation2;/*動畫名稱*/ -webkit-animation-duration:4s;/*動畫持續時間*/ -webkit-animation-timing-function:ease-in;/*變化由慢到快*/ -webkit-animation-delay: 2s;/*過了2S后開始動畫*/ -webkit-animation-iteration-count: infinite;/*設置動畫無限播放*/ -webkit-transform: translate(60px); animation-name:animation2; animation-delay: 4s; animation-timing-function: ease-in; animation-delay: 2s; animation-iteration-count: infinite; transform: translate(60px); -ms-animation-name:animation2; -ms-animation-duration:4s ; -ms-animation-timing-function: ease-in; -ms-animation-delay: 2s; -ms-animation-iteration-count: infinite; -ms-transform: translate(60px); -moz-animation-name:animation2; -moz-animation-delay:4s ; -moz-animation-timing-function: ease-in; -moz-animation-delay: 2s; -moz-animation-iteration-count: infinite; -moz-transform: translate(60px);
} @-webkit-keyframes animation1 { 0%{-webkit-transform: translate(-10px);opacity: 0;} 20%{-webkit-transform: translate(25px);opacity: 0.5;} 45%{-webkit-transform: translate(45px);opacity: 1;} 100%{-webkit-transform: translate(60px);opacity: 0.8;} } @-webkit-keyframes animation2 { 0%{-webkit-transform: translate(280px);opacity: 0;} 30%{-webkit-transform: translate(200px);opacity: 0.5;} 65%{-webkit-transform: translate(130px);opacity: 1;} 100%{-webkit-transform: translate(60px);opacity:0.8;} }
HTML代碼：
<div id="animation"> <span id="text1">這是ly婠婠的博客</span>
<span id="text2">歡迎訪問和評論！</span>
</div>
效果如下：
解析說明：
在這個例子中，效果如上圖。這里主要是利用animation和translate來達到一個文字漸進的效果。translate的作用是讓文字根據給定值發生平移。animation則利用關鍵幀和百分比數值來將平移過程細分成幾個幀，然后設置持續時間，一幀幀連接起來形成動畫。