再加上html5將很多之前需要依賴外部程式或者需要程式設計師們寫大量js來實現的東西標準化了，乙個目的就是豐富web設計，徹底丟棄第三方外掛程式，讓瀏覽器乾乾淨淨。
扯遠了，回到動畫。
在css3中定義動畫是件很方便的事情。原理有點像使用adobe公司的flash軟體來製作動畫。
我還記得那時我在把玩flash時所學習到的簡單flash動畫。比如定義好乙個物體的開始位置及狀態，0秒的時候乙個紅色50x50的矩形處於畫面**，再將畫面定位於時間軸上3秒處，將矩形設為100x100黃色。再右鍵新增補間動畫。這樣乙個簡單的動畫便完成了。
下面就是這麼乙個動畫的css實現。
像這樣關於位移，顏色漸變，甚至旋轉，3d效果等的動畫，現在都可以用css來做了。
首先我們來看一下css中的@符號。
當我首先看到這個東西的時候，完全搞不懂是什麼意思。於是開始嘗試去一**竟。
請考慮這樣一種情形，你想在web頁面使用設計師使用的一種字型，因為設計是那幫不懂coding的平面設計師搞出來的，老闆看了覺得還不錯，剩下實現的問題就交給你了。因為這種字型不是很通用，所以使用者電腦上有很大可能是沒有裝這一字型的，那就意味首頁面在使用者電腦上的呈現會不一致，頁面找不到指定的字型會呼叫系統預設的字型。
比如下面我們在頁面使用adelle_reg.otf字型。
通過開啟檢視可以得到font name，然後基本我們會通過一句簡單的css來搞定：
但由於我系統裡並沒有'adelle rg' 這樣的字型，所以頁面會是這樣的
所以我們考慮把字型檔案包含到css裡去，換句話說把字型檔案發送到客戶端。於是實現要改，這時使用@font-face 來指定字型檔案的路徑，這個時候我們初次看到引入了乙個@符號。
所以改過之後的**如上圖。
字型已經應用上且我們能夠在resource裡面發現字型檔案已經傳送到了客戶端瀏覽器。
從上面我們大致可以這樣理解此種情況下的@符號，雖然不太正確(比如@import, @media)，通過它定義了乙個特殊場合下的變數，這裡是定義字型，在動畫裡是定義動畫關鍵幀，然後我們會在css**的其他地方使用這個定義好的變數。
什麼是關鍵幀。一如上面對flash原理的描述一樣，我們知道動畫其實由許多靜態畫面組成，第乙個這樣的靜態畫面可以表述為一幀。其中關鍵幀是在動畫過程中體現了物理明顯變化的那些幀。
比如之前的例子中，元素div由50x50紅色的大小變化到狀態100x100 黃色的過程中，這一頭一尾的兩個狀態起到了對動畫定義的關鍵作用。所以這兩個狀態就是整個動畫的關鍵幀。
通過之前的胡說現在我們看到@keyframes就不會覺得這個@符號有多彆扭了。我們使用它來定義動畫的關鍵幀。
css**中定義關鍵幀重要的兩點是名稱和時間點。
其中狀態部分指定元素的樣式，因此可以是各種你想要的css**，顏色尺寸透明度旋轉等。'from'指定了動畫過程的開始狀態，'to'指定了動畫結束時元素的狀態。所以整個動畫也就是從from指定的開始狀態變化到to指定的狀態的過程。
假使我們已經建立好了乙個html文件，其結構很簡單只有乙個用於呈現動畫的div。
所以對於上面的例子，動畫的定義大概是下面這個樣子的：
當然對於狀態的定義不侷限於開始和結束兩個時間點，我們可以指定乙個動畫過程中任何時間點元素的狀態。下面是定義關鍵幀的另一種寫法。
上面定義了整個動畫過程中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和duration 是必需的，如果不指定duration預設為0，也就是動畫持續0秒，所以就無法看到動畫效果。
在前面已經定義好了關鍵幀了，現在我們使用animation將其應用到相應元素上。
現在開啟頁面就會看到最上面那個動畫效果了。
上面介紹過通過百分比的形象我們可以指定動畫過程中任何時間點時元素的狀態，將上面的版本變為百分比版本是非常容易的事情。
我們只需把關鍵幀的定義由from to 改為想要的時間百分比即可。
比如開始的狀態不改變，增加乙個動畫進行到50%時顏色為黃色大小為75x75，最後為綠色大小為100x100。
效果：another working demo (請使用chrome瀏覽器**效果):
reference:
CSS3 動畫一瞥
再加上html5將很多之前需要依賴外部程式或者需要程式設計師們寫大量js來實現的東西標準化了，乙個目的就是豐富web設計，徹底丟棄第三方外掛程式，讓瀏覽器乾乾淨淨。扯遠了，回到動畫。在css3中定義動畫是件很方便的事情。原理有點像使用adobe公司的flash軟體來製作動畫。我還記得那時我在把玩fl...
搞定css3的動畫 一
在html5中，改變是相當大的，尤其是動畫了。咱這裡只說動畫，不說其他元素。只談風月，不談政治。只為幫組學習css動畫。對前端開發來說，css動畫最令人激動的事情之一是，我們可以非常輕鬆地使用我們已經熟悉的工具來把它們新增進我們的專案中。如果您已經精通html和css，您就不需要學習新的語言或外掛程...
css3中變形與動畫（一）
css3製作動畫的幾個屬性 變形 transform 過渡 transition 和動畫 animation 首先介紹transform變形。transform英文意思 改變，變形。css3中transform主要包括以下幾種 旋轉 rotate 扭曲 skew 縮放 scale 移動 transl...