華清遠見成都中心
高端IT就業培訓專家
伴隨HTML5而來的CSS3讓前端小夥伴們可以用簡單的CSS樣式即可寫出動畫效果來，而在這之前，一提到動畫我們可能會想到JavaScript，Flash，等。如果是用JavaScript那倒也不是很糟糕的事啦，但如果寫出來的效果非要強迫客戶端安裝第三方插件才能顯示，畢竟不是很理想。這也就是為什麼谷歌會不遺餘力地推廣他所主導的開源項目WebRTC (Web Real-Time Communication)，把實時通訊的功能都做進瀏覽器，像視頻通話這樣的高級應用直接在JavaScript裡調用幾個瀏覽器API即可實現!這在以前想都不敢想。
再加上HTML5將很多之前需要依賴外部程序或者需要程式設計師們寫大量JS來實現的東西標準化了，一個目的就是豐富Web設計，徹底丟棄第三方插件，讓瀏覽器乾乾淨淨。說了這麼多，讓我開始談談CSS3的動畫。
定義動畫
在CSS3中定義動畫是件很方便的事情。原理有點像使用Adobe公司的Flash軟體來製作動畫。
比如定義好一個物體的開始位置及狀態，0秒的時候一個紅色50X50的矩形處於畫面中央，再將畫面定位於時間軸上3秒處，將矩形設為100X100黃色。再右鍵添加補間動畫。這樣一個簡單的動畫便完成了。像關於位移，顏色漸變，甚至旋轉，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將其應用到相應元素上。
現在打開頁面就會看到最上面那個動畫效果了。
使用百分比指定關鍵幀的版本
上面介紹過通過百分比的形象我們可以指定動畫過程中任何時間點時元素的狀態，將上面的版本變為百分比版本是非常容易的事情。
我們只需把關鍵幀的定義由from to 改為想要的時間百分比即可。
比如開始的狀態不改變，增加一個動畫進行到50%時顏色為黃色大小為75X75，最後為綠色大小為100X100。
往復的動畫
如果我們指定了direction為alternate的話，當動畫播放到結尾時，它會以相反的方向回到動畫開始的狀態，然後一直這樣交替播放。
有了上面的基本了解，我們可以寫一些簡單的動畫了。但真正驚讚的CSS3動畫是需要花一些功夫的，這裡就不繼續了。各位小夥伴們，你們是否看懂了呢?