#CSS：製作動畫效果－使用keyframe與animation

之前在網站上搞了一個Logo用的CSS3動畫，
然後現在這個部落格的標題也用了CSS3動畫，
故現在想來好好地整理一下跟CSS3動畫相關的功能，
底下就開始說明該如何建立CSS3動畫。

使用@keyframes建立動畫內容

首先先在CSS檔內建立@keyframes去制定動畫的內容，
其Syntax在下方：

keyframes.css

@keyframes動畫名稱{關鍵影格選擇器1{眾多css樣式;}關鍵影格選擇器2{眾多css樣式;}...}

概念類似Flash當中的關鍵影格，
在動畫內建立各個位置的時候，其css樣式為何，
到最後就交由瀏覽器去做補間效果。

關鍵影格選擇器的部分可使用：
1. 0-100% ：在時間的幾%時為何種css樣式，範例如下。

percent-selector.css

@keyframesmyAnimation{0%{margin-top:0px;background-color:yellow;}50%{margin-top:50px;background-color:red;}100%{margin-top:100px;background-color:blue;}}

2.from、to ：其實意思與0%和100%一樣，範例如下：

from-to-selector.css

@keyframesmyAnimationFromTo{from{margin-top:20px;color:yellow;}to{margin-top:80px;color:blue;}}

建立好@keyframes動畫內容後，
接著就要在欲放置該動畫的CSS樣式表內加入animation屬性。

Animation屬性

Animation屬性的Syntax於下：

animation.css

animation:namedurationtiming-functiondelayiteration-countdirection;

或者依照上面每一項的名稱皆可分開寫：

animation-split.css

animation-name:動畫名稱;animation-duration:動畫作用時間;animation-timing-function:動畫補間時運用的計算公式;animation-delay:動畫需間隔多久後才開始;animation-iteration-count:動畫作用次數;animation-direction:動畫作用的方向;

animation-name指的就是上面定義的@keyframes的名稱，找到你想用的@keyframes的名稱，填上去即可。

接著可以從animation-duration去指定其動畫時間，這也是為什麼上面定義@keyframes不是使用時間，
而是使用%，這可以讓同一個動畫重複使用，並且不一定要執行相同的時間。

timing-function有linear、ease、ease-in、ease-out、ease-in-out可以用，
或者可用cubic-bezier(n,n,n,n)來自己制定(0 <= n <= 1)。

至於iteration-count如果要無限多次可用infinite。

最後動畫作用的方向指的是動作作用的時候可以是@keyframes相反的方向(to->from、100%->0%)(reverse)，
或是作用完後又回頭(alternate)、或是先相反再變正常順序(alternate-reverse)。

底下用個範例去使用上面定義的myAnimation動畫：

div-animation.css

div{width:100px;height:100px;animation:myAnimation3sease0sinfinitealternate;}

大體上製作一個CSS Animation就是這樣的一個流程，
你也可以搭配CSS3的transform屬性去作出更多移動、翻轉、放大縮小的效果，
甚至是3D翻轉喔！！

如果不想自己coding出動畫，想藉助一些工具來做動畫，
可以參考使用CSS 3.0 Maker唷！

-webkit-前綴字

由於目前通用性的寫法在Chrome上還是不能用，
請在CSS多複製一份@keyframes動畫與animation屬性，
並在前面加上-webkit-前綴字，
如下列範例所示：

webkit.css

@keyframesmyAnimation{0%{margin-top:0px;background-color:yellow;}50%{margin-top:50px;background-color:red;}100%{margin-top:100px;background-color:blue;}}@-webkit-keyframesmyAnimation{0%{margin-top:0px;background-color:yellow;}50%{margin-top:50px;background-color:red;}100%{margin-top:100px;background-color:blue;}}div{width:100px;height:100px;animation:myAnimation3sease0sinfinitealternate;-webkit-animation:myAnimation3sease0sinfinitealternate;}