前言
在這個浮誇的時代，如果網頁上沒有酷炫的功能或特效，似乎就遜掉了；如何讓網頁變得酷炫呢？其中一個方法就是使用 CSS3 Animation！只要使用了 CSS3 Animation 就可以讓網頁中的元素動起來，立馬讓你的網頁酷炫度超越世界上 80% 的網頁！
而我個人身為一個全端工程師，稍微研究一下 CSS3 Animation 也是合理的，而且只要會一點點就可以拿來唬唬人，何樂而不為？很可惜這個技能就是唬不了正妹，哎，誰叫正妹只喜歡魔術呢～
不過請特別注意 CSS3 的 Animation 與 Transition 並不相同喔！雖然都可以做到相似的效果，有時看起來也真的很像，但實際上 Animation 與 Transition 依操作的程度不同所以適合使用的地方也會有所不同，或許我之後會再寫一篇文章介紹 Transition。（吧？）
就讓我們一起來看看 CSS3 Animation 大法怎麼練吧！
CSS3 Animation 第一級
假設我們要在一個 div 元素上加上動畫特效：
Step 1：定義要使用哪個關鍵影格(keyframe)來執行動畫
div {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: animation-keyframe-name 5s; /* Chrome, Safari, Opera */
-webkit-animation-iteration-count: infinite;
animation: animation-keyframe-name 5s;
animation-iteration-count: infinite;
}
這段 CSS 語法就是代表 div 元素要用哪個關鍵影格來執行動畫，詳細的動畫動作都會寫在關鍵影格裡面，在這邊的意思就是要使用一個名稱叫 animation-keyframe-name 的關鍵影格來進行動畫，後面的 5s 就代表這個動畫執行的時間會是 5 秒鐘。而 animation-iteration-count: infinite 則代表這個關鍵影格動畫會不斷重複執行。
特別注意有 -webkit- 這個前綴的 CSS 語法是為了支援 webkit 核心的瀏覽器，例如：Chrome、Safari、Opera 等等。
所以這段語法翻譯成白話文就是：div 這個元素要使用一個叫做 animation-keyframe-name 的關鍵影格來進行動畫，動畫執行的時間長度為 5 秒鐘，且動畫會不斷重複執行。
keyframe 的名稱如果不想要叫 animation-keyframe-name，也可以改成其他的，比如：fadein-keyframe、fadeout-keyframe 等等。
Step 2：定義關鍵影格(keyframe)中動畫如何變化
/* Chrome, Safari, Opera */
@-webkit-keyframes animation-keyframe-name {
from {background: red;}
to {background: yellow;}
}
/* Standard syntax */
@keyframes animation-keyframe-name {
from {background: red;}
to {background: yellow;}
}
這段 CSS 語法就定義了 animation-keyframe-name 這個關鍵影格的動畫變化，它會在 5 秒之內從原本背景色紅色（from {background: red;}）變為背景色黃色（to {background: yellow;}），就這樣我們就可以寫好 CSS3 動畫了，超簡單 der！
CSS3 Animation 第一級展示
CSS3 Animation 第二級
CSS3 Animation 第一級只有 from to 這兩種狀態可以指定動畫的變化，總感覺缺少了點什麼，如果好死不死動畫想要指定三種狀態變化怎麼辦？這時就要使用 CSS3 Animation 第二級了！在 CSS3 Animation 第二級我們可以使用動畫執行時間百分比來指定動畫變化的狀態。
/* Chrome, Safari, Opera */
@-webkit-keyframes animation-keyframe-name {
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
/* Standard syntax */
@keyframes animation-keyframe-name {
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
這段 CSS 語法將動畫的變化分成五個狀態，在動畫執行時間 0% 的時候是背景紅色的狀態（0% {background: red;}），在動畫執行時間 25% 的時候是背景黃色的狀態（25% {background: yellow;}），在動畫執行時間 50% 的時候是背景藍色的狀態（50% {background: blue;}），在動畫執行時間 75% 的時候是背景綠色的狀態（75% {background: green;}），在動畫執行時間 100% 的時候是背景變回紅色的狀態（100% {background: red;}），在我們這個例子裡動畫執行時間 100% 也就是動畫執行時間在第五秒的時候。如此我們就可以做更多細緻的動畫了。
CSS3 Animation 第二級展示
CSS3 Animation 第三級
在 CSS3 Animation 第三級我們可以使用更多屬性（property）來讓動畫有更多調整的空間，這些 animation 相關的 property 列表如下：
| CSS 屬性 | 說明 |
| animation-delay | 設定元素在被載入之後到開始執行動畫之間的延遲時間 |
| animation-direction | 設定元素在動畫執行完之後，是否要以相反方向的方式播放，或是從頭開始以原來的方向重複播放。 |
| animation-duration | 設定整個動畫執行一次的時間長度 |
| animation-iteration-count | 設定動畫執行的次數，若要不斷重複執行，則可設為 infinite |
| animation-play-state | 可用來暫停或繼續動畫播放 |
| animation-fill-mode | 設定元素在動畫執行前後如何套用 CSS 的樣式 |
| animation-timing-function | 設定動畫執行的時間函數 |
我們將所有動畫相關的屬性都使用看看：
div {
width: 100px;
height: 100px;
background: red;
position: relative;
/* Chrome, Safari, Opera */
-webkit-animation-name: animation-keyframe-name;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
/* Standard syntax */
animation-name: animation-keyframe-name;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
}
CSS3 Animation 第三級展示
感覺越來越強了！
CSS3 Animation 第四級
在 CSS3 Animation 第三級我們學會使用更多動畫相關屬性了，但 CSS 的語法卻變得很冗長，這時就要使出 CSS3 Animation 第四級，這樣就可以寫出更精簡的 CSS3 Animation 語法了！
上面例子的：
animation-name: animation-keyframe-name;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
可以改寫成：
animation: animation-keyframe-name 5s linear 2s infinite alternate;
所以就會變成：
div {
-webkit-animation: animation-keyframe-name 5s linear 2s infinite alternate; /* Chrome, Safari, Opera */
animation: animation-keyframe-name 5s linear 2s infinite alternate; /* Standard syntax */
}
CSS3 Animation 大法大功告成！
CSS3 Animation 第四級展示
結語
我們已經練完了 CSS3 Animation 大法的前四級，其實只要學會這些技巧，大概就能做出不錯的特效，只是動畫如何安排才會吸引人就要看個人的 Sense 了，像我就沒有什麼 Sense～
或許可以去請教對動畫最有 Sense 的 Rice Tseng 公主！
 ：禮儀師的樂章(2009)一幕.png)
