文章出處

伴隨HTML5而來的CSS3讓前端大濕們可以用簡單的CSS樣式即可寫出動畫效果來，而在這之前，一提到動畫我們可能會想到JavaScript，Flash，Java插件等。如果是用JavaScript那倒也不是很糟糕的事啦，但如果寫出來的效果非要強迫客戶端安裝第三方插件才能顯示，畢竟不是很理想。這也就是為什么谷歌會不遺余力地推廣他所主導的開源項目WebRTC （Web Real-Time Communication），把實時通訊的功能都做進瀏覽器，像視頻通話這樣的高級應用直接在JavaScript里調用幾個瀏覽器API即可實現！這在以前想都不敢想。

再加上HTML5將很多之前需要依賴外部程序或者需要程序員們寫大量JS來實現的東西標準化了，一個目的就是豐富Web設計，徹底丟棄第三方插件，讓瀏覽器干干凈凈。

扯遠了，回到動畫。

定義動畫

在CSS3中定義動畫是件很方便的事情。原理有點像使用Adobe公司的Flash軟件來制作動畫。

我還記得那時我在把玩Flash時所學習到的簡單Flash動畫。比如定義好一個物體的開始位置及狀態，0秒的時候一個紅色50X50的矩形處于畫面中央，再將畫面定位于時間軸上3秒處，將矩形設為100X100黃色。再右鍵添加補間動畫。這樣一個簡單的動畫便完成了。

下面就是這么一個動畫的CSS實現。

var demoContent='

像這樣關于位移，顏色漸變，甚至旋轉，3D效果等的動畫，現在都可以用CSS來做了。

CSS中的@符號

首先我們來看一下CSS中的@符號。

當我首先看到這個東西的時候，完全搞不懂是什么意思。于是開始嘗試去一探究竟。

請考慮這樣一種情形，你想在Web頁面使用設計師使用的一種字體，因為設計是那幫不懂Coding的平面設計師搞出來的，老板看了覺得還不錯，剩下實現的問題就交給你了。因為這種字體不是很通用，所以用戶電腦上有很大可能是沒有裝這一字體的，那就意味首頁面在用戶電腦上的呈現會不一致，頁面找不到指定的字體會調用系統默認的字體。

比如下面我們在頁面使用Adelle_Reg.otf字體。

通過打開查看可以得到Font name，然后基本我們會通過一句簡單的CSS來搞定：

但由于我系統里并沒有'Adelle Rg' 這樣的字體，所以頁面會是這樣的

所以我們考慮把字體文件包含到CSS里去，換句話說把字體文件發送到客戶端。于是實現要改，這時使用@font-face 來指定字體文件的路徑，這個時候我們初次看到引入了一個@符號。

所以改過之后的代碼如上圖。

先通過@font-face定義了一個取名叫'customFont'的font face，會在后面使用到
然后再通過給需要的頁面元素指定font-family 為剛才定義的customFont'

字體已經應用上且我們能夠在Resource里面發現字體文件已經發送到了客戶端瀏覽器。

從上面我們大致可以這樣理解此種情況下的@符號，雖然不太正確(比如@import, @media)，通過它定義了一個特殊場合下的變量，這里是定義字體，在動畫里是定義動畫關鍵幀，然后我們會在CSS代碼的其他地方使用這個定義好的變量。

關鍵幀

什么是關鍵幀。一如上面對Flash原理的描述一樣，我們知道動畫其實由許多靜態畫面組成，第一個這樣的靜態畫面可以表述為一幀。其中關鍵幀是在動畫過程中體現了物理明顯變化的那些幀。

比如之前的例子中，元素div由50X50紅色的大小變化到狀態100X100 黃色的過程中，這一頭一尾的兩個狀態起到了對動畫定義的關鍵作用。所以這兩個狀態就是整個動畫的關鍵幀。

@keyframes 定義動畫關鍵幀

通過之前的胡說現在我們看到@keyframes就不會覺得這個@符號有多別扭了。我們使用它來定義動畫的關鍵幀。

CSS代碼中定義關鍵幀重要的兩點是名稱和時間點。

其中狀態部分指定元素的樣式，因此可以是各種你想要的CSS代碼，顏色尺寸透明度旋轉等。'from'指定了動畫過程的開始狀態，'to'指定了動畫結束時元素的狀態。所以整個動畫也就是從from指定的開始狀態變化到to指定的狀態的過程。

假使我們已經創建好了一個HTML文檔，其結構很簡單只有一個用于呈現動畫的div。

所以對于上面的例子，動畫的定義大概是下面這個樣子的：

定義的動畫取名'example'
在'from'也就是動畫開始時指定元素長50px寬50px，背景色為紅色
在'to'也就是動畫結束時指定元素長100px寬100px，背景色為黃色
對于使用webkit內核的瀏覽器比如Chrome,Safari需要使用-webkit-前綴，所以需要寫兩套代碼，以保證在Chrome或Safari里能工作

當然對于狀態的定義不局限于開始和結束兩個時間點，我們可以指定一個動畫過程中任何時間點元素的狀態。下面是定義關鍵幀的另一種寫法。

上面定義了整個動畫過程中0%，50%，100%三個時間點元素的狀態。比如我們定義了一個時長為10秒的動畫，那么0%就是動畫開始時0秒的時候，0%后面的代碼指定元素在動畫開始時是怎樣的，然后50%也就是動畫進行到5秒的時候，元素又是什么樣子。最后100% 對于動畫進行到10秒也就是動畫結束時元素的狀態。

因此用這種寫法我們可以指定的元素狀態數量沒有限制，可以更精確地控制整個動畫。

CSS3 animation屬性

當我們使用@keyframes定義好了一個動畫，它并不會執行產生任何效果，直到我們通過animation屬性將動畫應用到相應元素上。

對于 CSS3 animation 屬性其完整的語法如下：

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

name是使用@keyframes定義好的關鍵幀名稱
duration從字面意思可知是指定動畫持續時間
timing-function 指定動畫以何種方式播放，具體指的是從元素的一個狀態過渡到另一個狀態所使用的方式，可用的值有linear，ease, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n)。每種方式的討論超出了原計劃，這里只是列出
delay指定一個延時讓動畫不立即播放
iteration-count 指定動畫重復次數，可以指定一個數字，也可以使用'infinite'表示一直播放
direction指定動畫是否反向播放或者交替著播放，可用的值有normal, reverse, alternate, alternate-reverse

其中name和duration 是必需的，如果不指定duration默認為0，也就是動畫持續0秒，所以就無法看到動畫效果。

在前面已經定義好了關鍵幀了，現在我們使用animation將其應用到相應元素上。