前言

在CSS3 中新增了 Animation 語法，這個語法相較於 使用 JavaScript 編寫動畫效果，有以下好處：

• 對於網頁程式初學者來說，CSS Animation 比起 JavaScript 更容易入門。
• 在資源消耗上，即便在系統負載超果 50% 的狀態下，Animation 仍然可以有效的運作。由於 Animation 是類似於先將每一幀的幀數寫好，讓瀏覽器運算，類似於寫好靜態資料因此瀏覽器只需要運算過一次。而 JavaScript 則是動態即時載入的資料，瀏覽器無法預先知道 JS 動畫編碼，因此在每一秒的動畫產生，都必須要用盡效能去做運算。因此，Animation 能夠適時地減少幀數以及其他資源消耗。

好，到了這邊大家對於 Animation 有個大概的輪廓了嗎？那麼接下來就來好好認識一下 Animaton 吧！ Let's Gooooo!

簡介

Animation 的開始時間同時也是解析應用動畫的時間。如果為元素指定了動畫，但沒有給予相對應的 @keyframes 規則內時間，則動畫無法開始。
在瀏覽器中解析 CSS 語法的順序為：動態解析完該元素的樣式後才會開始解析動畫。

chrome safari 瀏覽器渲染流程圖

firefox 瀏覽器渲染流程圖

而對於一些諸如 :hover 偽纇的事件指令，則是將 :hover 指令以及其樣式寫在 script 內，完成了 :hover 事件之後，才把元素控制權交還給瀏覽器。

若我們對指定動畫的元素設定了 disaplay: none 那麼將會終止該元素及其後代元素的任何動畫運行。

Animation 與 Transition 的比較

在前面幾篇有提到關於 Transition 的詳細介紹，相信大家應該都非常清楚 Transition 屬於 元素狀態間的轉變，而 Animation 不單單只是改變元素狀態，他還能控制動畫播放次數、播放時間長度等功能，下面快速介紹一下兩者差異：

使用關鍵影格

還記得在 動畫的12法則 中提到的 關鍵幀數(極端 extremes) 嗎？在 Aniamtion 中可以藉由兩個以上的關鍵影格來定義元素動作的過程。我們可以透過關鍵影格來指定動畫動作的過程與時間。0% 代表他是整個動畫的起始點，而 100% 代表整個動畫的結束點。這倆特殊得時間點是 必須要被定義的，如此一來瀏覽器才能夠解析如何產生動畫。因此我們稱呼這樣個特殊的時間點為 form 和 to。

儘管我們可以透過 Animation 來創造許多有趣的網頁動畫，但是在這邊要特別注意的是有些動畫可能會導致使用者癲癇症發作(例如：元素一秒閃爍超過三次以上)。
有關如何避免導致癲癇症發作的文章，可以參考有關於無障礙式網頁的相關規範：Guideline 2.3

Animation 基礎語法

animation: name | timing-function | delay | iteration-count | direction | fill-mode | play-state;

Animation 語法支援度

雖然相較於其他基礎 CSS 語法，Animation 是相對晚推出的語法，即便現今的瀏覽器有不斷的在更新效能，但我們還是來確認一下 Animation 的支援度吧。

各家瀏覽器版本的支援度演化

由此網站可以知道 Animation 已經可以在 大部分的網站 上執行了，但還是有些許的 issues 需要注意一下。

今天是 Animation 入門篇，大家有沒有對於 Animation 有進一步了解呢？由於本篇有提及網頁引擎渲染與事件操作，連我自己都被搞得暈頭轉向呢 இдஇ，若是文章內容有誤，或是讀者有更好的見解，都歡迎隨時提出討論呦！

那麼明天我們會進入 Animation 屬性詳細介紹，大家明天見～

參考資料

W3.org - Animations
前端新手村 都市傳說之隱藏元素的手法
實踐無障礙網頁設計（Web Accessibility）