使用 CSS3 創建動畫效果

睡蓮 — Mon, 01 Feb 2010 14:36:14 +0200

類別: 語言集
來源: (http://wlsy.me/1740/)

概述

在 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 創建動畫效果

概述

應用前景

CSS Transition

CSS Animation

Transform

結語