再加上HTML5将很多之前需要依賴外部程式或者需要程式員們寫大量JS來實作的東西标準化了，一個目的就是豐富Web設計，徹底丢棄第三方插件，讓浏覽器幹幹淨淨。
扯遠了，回到動畫。
在CSS3中定義動畫是件很友善的事情。原理有點像使用Adobe公司的Flash軟體來制作動畫。
我還記得那時我在把玩Flash時所學習到的簡單Flash動畫。比如定義好一個物體的開始位置及狀态，0秒的時候一個紅色50X50的矩形處于畫面中央，再将畫面定位于時間軸上3秒處，将矩形設為100X100黃色。再右鍵添加補間動畫。這樣一個簡單的動畫便完成了。
下面就是這麼一個動畫的CSS實作。
var demoContent='
像這樣關于位移，顔色漸變，甚至旋轉，3D效果等的動畫，現在都可以用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就不會覺得這個@符号有多别扭了。我們使用它來定義動畫的關鍵幀。
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秒也就是動畫結束時元素的狀态。
是以用這種寫法我們可以指定的元素狀态數量沒有限制，可以更精确地控制整個動畫。
當我們使用@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将其應用到相應元素上。
現在打開頁面就會看到最上面那個動畫效果了。
上面介紹過通過百分比的形象我們可以指定動畫過程中任何時間點時元素的狀态，将上面的版本變為百分比版本是非常容易的事情。
我們隻需把關鍵幀的定義由from to 改為想要的時間百分比即可。
比如開始的狀态不改變，增加一個動畫進行到50%時顔色為黃色大小為75X75，最後為綠色大小為100X100。
效果：
如果我們指定了direction為alternate的話，當動畫播放到結尾時，它會以相反的方向回到動畫開始的狀态，然後一直這樣交替播放。
有了上面的基本了解，我們可以寫一些簡單的動畫了。但真正驚贊的CSS3動畫是需要花一些功夫的，這裡就不繼續了，或許我會在下一篇中介紹一個例子。
Another working demo (請使用Chrome浏覽器觀看效果):
Reference:
<a href="http://nettuts.s3.amazonaws.com/581_cssTransitions/demos.html">http://nettuts.s3.amazonaws.com/581_cssTransitions/demos.html</a>
<a href="http://www.w3schools.com/css/css3_animations.asp">http://www.w3schools.com/css/css3_animations.asp</a>