CSS3 animation 動畫屬性

CSS3 animation 動畫屬性是 CSS 用來設計網頁動畫的標準屬性，CSS3 animation 有許多種不同的屬性效果可以設定，用來控制動畫的移動方式、移動方向、顏色變化 ... 等效果，功能非常的強大，CSS3 animation 屬性甚至可以達到傳統需要用 JavaScript 或 Flash 設計的動畫效果，優點是完全不需要 JavaScript 就可以設計出不太複雜的動畫，而且更具有消耗資源的優勢，如果要用 JavaScript 設計出相同效果的動畫，通常需要較為複雜的程式碼，也比較吃資源，CSS3 animation 把動畫生成的工作交給瀏覽器處理，對於動畫優化也有所幫助。

使用 animation 動畫屬性只需要設定好 animation 的屬性以及關鍵影格 keyframes 就可以很輕鬆的讓動畫跑起來，但是各家瀏覽器的支援程度還不一致，所以在 CSS 的語法中，會需要加入特別為瀏覽器所寫的字首（prefix），這個部分在範例中會看到。

基本設定一：CSS3 animation 動畫屬性語法

animation: name duration timing-function delay iteration-count direction;

CSS3 animation 共有六個基本屬性可以使用，分別是 name、duration、timing-function、delay、iteration-count、direction 這六個，用來控制動畫元素的各種動畫效果，一個 animation 就可以把這六個屬性都寫完，也可以分別設計各個屬性的值，這六個屬性效果如表所示。

CSS3 animation 動畫屬性清單

屬性	說明
animation-name	定義動畫的關鍵影格 @keyframes 名稱。
animation-duration	定義動畫執行一次的時間，可以秒或毫秒為單位。
animation-timing-function	定義動畫執行的速度曲線，例如線性 linear 或低速開始。
animation-delay	定義動畫準備完成至開始動作的時間，可以秒為單位，若為 0s 表示不延遲。
animation-iteration-count	定義動畫重覆執行次數，若要無限次執行可使用 infinite。
animation-direction	定義動畫執行完一次是否需要反向執行，若要反向執行可使用 alternate。

基本設定二：@keyframes 關鍵影格的設定

關鍵影格 keyframes 的設定可以說是 CSS3 animation 動畫效果的關鍵，若是缺少了關鍵影格的設定，動畫就跑不起來，要設定關鍵影格有兩個重點，分別是從哪邊開始跑（from）以及跑到哪裡結束（to），關鍵影格是透過 percentage 來判斷動畫啟動的時間點以及結束的時間點，0% 代表的是動畫起點，100% 則代表動畫結束點，使用 from 與 to 來設定，這部分在範例中也都會看到。關鍵影格描述的是動畫建變過程的外觀，也就是說，除了可以利用關鍵影格來控制 animation 動畫的跑動，也可以控制動畫的顏色改變。

CSS3 animation 範例一、讓 DIV 區塊由左移至右

範例效果

範例一呈現了基本的 DIV 區塊移動效果，CSS 語法中先對 D1 區塊設定基本的尺寸、顏色與位置，然後透過 animation 屬性設計出 5 秒重覆執行的動畫效果，關鍵影格設定區塊從左邊 0% 跑到右邊 80% 結束，紅色的 DIV 區塊從左邊開始移動到右邊，接著變回左邊開始重覆跑再一次，整個動畫效果就這樣連續不停的重覆執行著。

範例中的 animation 屬性以及關鍵影格 keyframes 前面都有加上字首（prefix），這樣的功能就是讓不同的瀏覽器能夠支援這個動畫的效果，其中「-moz-」是讓 FireFox 支援、「-webkit-」是要讓 Chrome 與 Safari 支援，都沒有加字首的是給 IE 看的，IE10 開始支援 CSS3 animation 屬性，IE9 以及更早版本的 IE 瀏覽器是不支援 animation 效果的。

CSS3 animation 範例二、讓 DIV 區塊左右來回運動

範例效果

範例一中的紅色 DIV 區塊從左邊開始跑到右邊，又跳回左邊重新開始，這樣感覺並不流暢，如果我們讓紅色 DIV 區塊的動作改成跑到右邊接著反方向跑回左邊，這樣整個動畫就變得更流暢了，範例二的程式碼與範例一大同小異，主要的差別在使用了 animation-direction 的反方向執行效果 alternate，為了讓範例程式碼比較整潔，所以我們同樣直接把 alternate 寫在 animation 屬性裡，修改過後的紅色 DIV 區塊是不是動作變得比較流暢的感覺了呢？第一段提到過 animation 屬性不只是可以製作移動的動畫，也可以製作變色的動畫，請看範例三。

CSS3 animation 範例三、讓 DIV 區塊變顏色

範例效果

在範例三中，我們把 DIV 區塊放大了些，看起來比較清楚，變色的重點在關鍵影格的設定，我們先看 CSS 程式碼中對 D3 區塊的設定，基本的尺寸、顏色與位置都設定好之後，開始動畫 animation 屬性的設定，這次變化時間設定為 3 秒，也是無限次執行，同樣也有反向執行，關於區塊動畫的基本設定完成後，馬上進入變色的重點，關鍵影格 keyframes 的設定，動畫開使是的效果是紅色背景顏色，動畫結束是橘色背景顏色，這樣長方形 DIV 區塊就會在紅色與橘色之間變換。

語法「from {background-color:red;}」設置區塊背景顏色為紅色
語法「from {background-color:orange;}」設置區塊背景顏色為橘色

CSS3 animation 動畫屬性雖然剛開始使用會有點複雜，但是比起用 JavaScript 來設計這些效果，CSS3 animation 動畫屬性還是有比較多的優勢，而且稍微熟悉後，其實也相當的簡單，可以設計出比範例更多豐富的動畫效果。

延伸閱讀