概述
在 CSS3 中新增了幾個很好玩的東東：CSS Animation，CSS Transition 和 CSS Transform，顧名思義就是通過 CSS 來實現動畫，過渡和變形。
它們與 HTML5 中的 canvas 能繪製動畫圖形不同，這些只能應用在已存在的元素上，但這足以讓我很興奮了，我不必要在去寫那些複雜的 JS 代碼，運用它們我能更簡單的創建自己的想要的動畫。
應用前景
伴隨著 CSS3 的普及，這些特性被各大瀏覽器支持也只是時間上的問題。有消息稱在 Internet Explorer 9 中將更好的支持 HTML5 和 CSS3。所以各位圍觀群眾不必擔心這只是曇花一現。以下是我就目前的瀏覽器支持狀態統計的一個表格：
| IE8 - | chrome & safair | firefox 3.5.5 *(3) | opera 10.10- *(4) | |
|---|---|---|---|---|
| CSS Transiton | X | O | X | X |
| CSS Animation | X | O | X | X |
| 2D Transform | *(1) | O | O | X |
| 3D Transform | X | *(2) | X | X |
備註：
*(1)：IE 可以通過濾鏡來實現部分變形
*(2) : Windows 下的 chrome 和 safair 支持部分 3D Transform。mac 和 iphone 下的 safair 支持全部 3D Transform (未驗證)
*(3)：firefox3.7 同 IE9 一樣稱將支持更多 CSS3 特性，不過最終是否支持 Animation 和 3D Transform 還不是很確定
*(4)：oprea 已經在表示在 Presto2.3(opera 內核)中將支持 Transtion。可查看 wiki
接下來要開始了，各位看官準備好 chrome 或 safair，演示和代碼使用 webkit 的私有屬性，let's 幹吧。
CSS Transition
這個能實現很舒服的過度效果，先看CSS代碼片段：
.box {
width: 200px;
height: 200px;
background: #ccc;
-webkit-transition: all 1s ease-in-out; /*實現 hover 狀態是 backround 的過渡*/
}
.box:hover {
background: #333;
}你可以在這裡看到這個演示，務必請用基於 webkit 的 chrome 或 safair（以下同）。看完演示是不是很有興趣想去學如何去使用了？transiton 屬性有這幾個值：
transition-property :* //指定過度的性質，比如 transition-property：backgrond 就是只指定 backgound 參與這個過渡
transition-duration:*//指定這個過渡的持續時間
transition-delay:* //延遲過渡時間
transition-timing-function:*//指定過度類型，有 ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier
小貼士
linear //線性過度
ease-in //由慢到快
ease-out //由快到慢
ease-in-out //由慢到快在到慢
timing-funciton 的幾種過度類型都是基於 cubic-bezier 的某些特定數值。比如 ease-in-out 的類型它也可以寫成 cubic-bezier(0.42, 0, 0.58, 1.0)。你可以在這裡看到 cubic-bezier 曲線圖
Transiton 和下面的 Animation 都是支持 CSS 偽類
同樣的，這些我們可以簡寫，拿上面的代碼 -webkit-transition: all 1s ease-in-out; 包含了property , duration ,timing-fuction。
參考資料：
CSS Transitions Module Level 3 （這個是w3c的官方文檔，英語好的可以詳細看看）
http://webkit.org/blog/138/css-animation/ （這個webkit官方博客上的講解，也有例子）
怎麼樣，趕緊打開編輯器自己寫寫吧
CSS Animation
顧名思義，這個就能實現元素的動畫效果，那時我就被震驚了，無數次那尼感嘆。可以先看下演示，代碼如下
@-webkit-keyframes title {
0% {
text-shadow:0px 0px 15px #000;
}
50% {
text-shadow: 0px 0px 30px #3995bd;
color: #aac7d4;
margin-top:200px;
}
100% {
text-shadow: 0px 0px 15px #000;
}
}
h1 {
-webkit-animation: title infinite ease-in-out 3s;
}
animation 有這幾個屬性：
animation-name//屬性名，就是我們定義的 keyframes
animation-duration //持續時間
animation-timing-function //同上面的 transition-timing-function
animation-delay // 設置動畫延遲
animation-iteration-count //定義循環次數，infinite 為無限
animation-direction //定義動畫方式
這些同樣是可以簡寫的。但真正讓我覺的很爽的是 keyframes 這個似乎有點像 js 裡面的 function，它能定義一個動畫的轉變過程供調用，過程為 0% 到 100% 或 from(0%) 到 to(100%) ，簡單點說，只要你有想法，你想讓元素在這個過程中以什麼樣的方式改變都是很簡單的。
你是不是已經開始蠢蠢欲動了？
參考資料：
http://www.w3.org/TR/2009/WD-css3-animations-20090320/
Transform
transform 就是實現元素的變形，為什麼放到最後？如果跟上面的 CSS Animation 結合起來是不是更酷呢？先看看這樣一個演示，相信你不敢相信這只用 CSS 寫出來的效果吧。
transform 有幾種類型：
scale(num,num) //尺寸，scale(2,3)即 x 軸方向放大兩倍，y 軸方向放大3被，同樣的可單獨寫 scaleX(2),scaleY(3)
rotate(*deg) //旋轉的角度
在2d transform 中旋轉角度俺當前的平面順時針或逆時針旋轉。在 3d transform 中新增了 rotateX 和 rotateY 它們分別以 y 軸或 x 軸為中心進行旋轉，同樣可以簡寫稱 rotate(*,*)。目前已被chrome和safair支持
skew（*deg）//傾斜角度，同樣的有 skewX 和 skewY 可簡寫為 skew（*,*）
translate //移動
在 2d transform 中分為 translateX 和translateY 簡而言之就是元素網x軸或y軸的移動距離，而在 3dtransform 中新增了一個 translateZ 及實現Z軸的移動，實現透視效果。目前在 Windows 系統上還沒有瀏覽器支持，同樣的這些可以簡寫。
了解完這些用法後在去看看那個演示的源碼，相信你肯定會驚嘆 transform 和 animation 配合的動畫效果了吧
參考資料：
http://www.w3.org/TR/2009/WD-css3-2d-transforms-20090320/ （w3c文檔）
3D Transforms （webkit博客上的文章，所以在Windows下沒法看到，不過那裡有截圖過過癮，並有一個很酷在Windows下打了折扣的demo哦）
http://www.zachstronaut.com/lab/isocube.html(這個就是用transfrom實現的立方體)
結語
看到這些，你是否跟我一樣期待 HTML5 和 CSS3 的快點普及呢？在運用這些新特性能快速而簡單的創建原本需要復雜js來實現的動畫效果，這是多麼讓人興奮的。
不過這些還是有那麼些缺點的，CSS Animation 的確很酷，但不得不提及它的資源佔用問題，CSS transform 的確很神奇，但不得不提及它的鋸齒問題，當然了這些問題相信瀏覽器的開發者會逐漸改善的。
使用 CSS3 創建動畫效果
