CSS3動畫，為你帶來極致的視覺體驗！
HTML5學堂：隨著網路的發展，瀏覽器具有更強的渲染與高階程式碼的執行能力。所以在當前，大量的動畫效果由原來的JavaScript製作正慢慢的被CSS3所替代，究其原因在於CSS3的效能會比JS的效能來的好，並且CSS3動畫為使用者帶來了強大而又震撼的效果，為開發者帶來了簡單的書寫方式。
本文主要內容
1、前言
2、實現動畫的前奏
3、CSS3動畫的語法
4、例項解析
5、總結
1、前言
CSS3屬性中有關於製作動畫的三個屬性：Transform、Transition、Animation；之前一起學習了Transform和Transition，讓我們可以對元素實現一些基本的動畫效果。這些我想足以讓大家稍微驚訝了一下，今天我們趁著這個熱勁繼續第三個動畫屬性Animation。
單從Animation字面上的意思，就知道是“動畫”的意思。但CSS3中的Animation只應用在頁面上已存在的DOM元素上，而且跟Flash和JavaScript以及jQuery製作出來的動畫效果又不一樣，因為使用CSS3的Animation製作動畫可以省去複雜的js、jQuery程式碼。
當然CSS3也有一點不足，我們運用Animation能建立自己想要的一些動畫效果，但是有時會有卡頓現象。所以如果想要製作比較好的動畫，建議大家還是使用CSS3與js相結合的書寫方式。
2、實現動畫的前奏
在開始介紹Animation之前有必要先來了解一個特殊的東西，那就是"Keyframes"，我們把它叫做“關鍵幀”。下面我們就一起來看看這個“Keyframes”是什麼東西。
前面在使用transition製作一個簡單的transition效果時，包括了初始屬性和最終屬性，一個開始執行動作時間和一個延續動作時間以及動作的變換速率。其實這些值都只是一箇中間值，如果我們要控制的更細一些，比如說要第一個時間段執行什麼動作，第二個時間段執行什麼動作。這樣再用Transition就很難實現了，所以此時也需要這樣的一個“關鍵幀”來控制。
而CSS3的Animation就是由“keyframes”這個屬性來實現這樣的效果。下面我們一起先來看看Keyframes:
Keyframes具有其自己的語法規則，它的命名是由"@keyframes"開頭，後面緊接著是這個“動畫的名稱”加上一對花括號“{}”，括號中就是一些不同時間段樣式規則，有點像我們css的樣式寫法一樣。
對於一個"@keyframes"中的樣式規則是由多個百分比構成的，如“0%”到"100%"之間，可以在這個規則中建立多個百分比，分別在每一個百分比中給需要有動畫效果的元素加上不同的屬性，從而讓元素達到一種在不斷變化的效果，比如說移動、改變元素顏色、位置、大小、形狀等。
不過有一點需要注意的是，可以使用“from”和“to”來代表一個動畫是從哪開始，到哪結束。也就是說這個 "from"就相當於"0%"，而"to"相當於"100%"。值得一說的是，關鍵幀中的數值段必須是百分數，如果不是百分數，這個keyframes是無效的，不會起任何作用。因為keyframes的單位只接受百分比值。
Keyframes可以指定任何順序排列來決定Animation動畫變化的關鍵位置。其具體語法規則如下：
@keyframes IDENT {
0% {
Prop: Prop value;
}
Percentage {
Prop: Prop value;
}
100% {
Prop: Prop value;
}
}程式碼解析：IDENT是一個動畫名稱，建議語義化一點更好。Percentage是百分比值，可以新增許多個這樣的百分比。Prop為CSS的屬性名，比如說left、background等，Prop value就是相對應屬性的屬性值。
值得一提的是，from和to分別對應的是0%和100%。
3、CSS3動畫的語法
CSS3的Animation類似於Transition屬性，都是隨著時間改變元素的屬性值。主要區別是Transition需要觸發一個事件(hover事件或click事件等)才會隨時間改變其CSS屬性；而Animation在不需要觸發任何事件的情況下也可以顯式的隨著時間變化來改變元素CSS的屬性值，從而達到一種動畫的效果。
這樣就可以直接在一個元素中呼叫Animation的動畫屬性，基於這一點，CSS3的Animation就需要明確的動畫屬性值，這也就是回到上面所說的，我們需要keyframes來定義不同時間的CSS屬性值，以達到元素在不同時間段變化的效果。
下面引用一張W3C官網對於CSS3的Animation對屬性變化的過程示意圖：
從上圖中可以看出Animation和Transition一樣有自己相對應的屬性，那麼在Animation主要有以下幾種屬性：動畫名稱(animation-name)、動畫持續時間(animation-duration)、動畫的速度曲線(animation-timing-function)、動畫延遲時間(animation-delay)、動畫播放次數(animation-iteration-count)、動畫播放方向(animation-direction)。下面分別來看看這幾個屬性的使用情況：
1）animation-name
語法：
animation-name: none | IDENT ;取值說明：
animation-name：是用來定義一個動畫的名稱。其主要有兩個值：none為預設值，當值為none時，將沒有任何動畫效果；IDENT是由Keyframes建立的動畫名，換句話說此處的IDENT要和Keyframes中的IDENT一致，如果不一致，將不能實現任何動畫效果。
2）animation-duration
語法：
animation-duration: time;取值說明：
animation-duration：是用來指定元素播放動畫所持續的時間長。取值:time為數值，單位為s（秒），其預設值為“0”。這個屬性跟transition中的transition-duration使用方法是一樣的。
3）animation-timing-function
語法：
animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out;取值說明：
animation-timing-function：是指元素根據時間的推進來改變屬性值的變換速率，說得簡單點就是動畫的播放方式。它和transition中的transition-timing-function一樣，具有以下幾種變換方式：ease、linear、ease-in、ease-out、ease-in-out。具體的使用大家可以去檢視——CSS3過渡，不再為JS動畫而犯愁這篇文章。
4）animation-delay
語法：
animation-delay: time;取值說明：
animation-delay：是用來指定元素動畫開始時間。取值為time為數值，單位為s(秒)，其預設值也是0。
5）animation-iteration-count
語法：
animation-iteration-count: infinite | number;取值說明：
animation-iteration-count：是用來指定元素播放動畫的迴圈次數。其可以取值number為數字，其預設值為“1”；infinite為無限次數迴圈。
6）animation-direction
語法：
animation-direction: normal | alternate;取值說明：
animation-direction：是用來指定元素動畫播放的方向。其只有兩個值，預設值為normal。如果設定為normal時，動畫的每次迴圈都是向前播放；另一個值是alternate，它的作用是，動畫播放在第偶數次向前播放，第奇數次向反方向播放。
7）屬性值合併書寫
上面分別介紹了Animation中的各個屬性的語法和取值，那麼綜合上面的內容可以給Animation屬性一個速記法，如下圖所示：
4、例項展示
結合之前的CSS3變形，使用動畫實現無限旋轉的效果，如下：
HTML程式碼如下：
<!-- 案例的結構 -->
<div class="wrap">
<div><a href="###" title="HTML+CSS">HTML+CSS</a></div>
<div><a href="###" title="JavaScript">JavaScript</a></div>
<div><a href="###" title="HTML+CSS">HTML+CSS</a></div>
<div><a href="###" title="JavaScript">JavaScript</a></div>
<div><a href="###" title="JavaScript">JavaScript</a></div>
<div><a href="###" title="HTML+CSS">HTML+CSS</a></div>
</div>對應的CSS樣式效果如下：
body {
/*視角*/
-webkit-perspective: 2000px;
}
.wrap {
position: relative;
width: 500px;
height: 500px;
margin: 0 auto;
/*宣告3D樣式*/
-webkit-transform-style: preserve-3d;
/*實現旋轉的動畫*/
-webkit-animation: circumgyrate 15s linear infinite;
}
/*定義旋轉關鍵幀*/
@-webkit-keyframes "circumgyrate" {
0% {
-webkit-transform: rotateY(0deg);
}
100% {
-webkit-transform: rotateY(360deg);
}
}
.wrap div {
position: absolute;
left: 150px;
top: 150px;
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
-webkit-border-radius: 30px;
/*實現陰影呼吸的動畫*/
-webkit-animation: colorchange 2s ease infinite alternate;
}
/*定義每個模組外層的陰影關鍵幀*/
@-webkit-keyframes "colorchange" {
0% {
box-shadow: 0px 0px 5px 5px rgba(251, 255, 202, 0.1);
}
100% {
box-shadow: 0px 0px 15px 10px rgba(236, 253, 19, 0.5);
}
}
.wrap div a {
display: block;
width: 200px;
height: 200px;
text-decoration: none;
}
/*六邊形的每一個內角為60度*/
.wrap div:nth-child(1) {
background: #b0ca53;
-webkit-transform: rotateY(60deg) rotateZ(30deg) translateZ(300px);
}
.wrap div:nth-child(2) {
background: #a0dae4;
-webkit-transform: rotateY(120deg) rotateZ(30deg) translateZ(300px);
}
.wrap div:nth-child(3) {
background: #f48996;
-webkit-transform: rotateY(180deg) rotateZ(30deg) translateZ(300px);
}
.wrap div:nth-child(4) {
background: #7ed3f0;
-webkit-transform: rotateY(240deg) rotateZ(30deg) translateZ(300px);
}
.wrap div:nth-child(5) {
background: #f8aa96;
-webkit-transform: rotateY(300deg) rotateZ(30deg) translateZ(300px);
}
.wrap div:nth-child(6) {
background: #13b27b;
-webkit-transform: rotateY(360deg) rotateZ(30deg) translateZ(300px);
}實現的效果如下圖所示：
5、總結
到目前為止，通過對CSS3的系列介紹，完成常規效果開發中所會用到的很多方法，如：陰影、變形、過渡、動畫等等。當然，CSS3的使用方法還遠不止這些，大家可以多去做了解與檢視。