CSS3 動畫一瞥

伴隨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黃色。再右鍵添加補間動畫。這樣一個簡單的動畫便完成了。

像這樣關於位移，顏色漸變，甚至旋轉，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動畫是須要花一些功夫的，這裏就不繼續了，或許我會在下一篇中介紹一個例子。

Reference

• http://nettuts.s3.amazonaws.com/581_cssTransitions/demos.html
• http://www.w3schools.com/css/css3_animations.asp

---

by 劉哇勇