CSS3 transition實現超酷動畫效果

1、前面的感慨
之前也陸陸續續試過CSS3的一些特性，文字投影，多邊框等。但都是試試而已，知道有這麼回事。今天，見到了一個新玩意，transition，認認真真的試了一下，通過，我懵了，我呆了，我傻了，半天說不出話來，這…這…unbelievable，amazing，太神奇了，太難以想象了，幾行簡單的CSS，如此炫酷的動畫效果，flash都不及的動畫效果，我真是難以表達個人心情。

下面由淺入深，使用純CSS，一步一步實現圖片牆動畫效果。這裏，必需要先說明一下：對於對於此transition效果，IE6,IE7,IE8瀏覽器能夠回家過元旦節了，這裏沒有它們的事情，Firefox3雖然平時表現不錯，這裏也沒有它的事情。這個效果最拿手的是chrome2瀏覽器，Safari4，也就是webkit家族，這裏Firefox3.5勉強湊合，有盒陰影和旋轉效果，可是沒有動畫。因此，下文陸續提供的demo頁面僅適用於chrome瀏覽器和Safari瀏覽器，部分適用於Firefox3.5+，IE純粹的觀衆。

2、基礎練習 – 實現旋轉與盒投影效果
在CSS3中，實現旋轉效果須要用到transform屬性中的rotate屬性；實現盒陰影效果須要使用box-shadow屬性。具體參見下面的示例代碼。

-webkit-transform:rotate(10deg); -moz-transform:rotate(10deg); transform:rotate(10deg);
-webkit-box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4); -moz-box-shadow:2px 2px 3px 
   rgba(135, 139, 144, 0.4); box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4);

上面代碼部分，首先應該知道的是webkit表示webkit核心的瀏覽器，是其私有屬性，做用於chrome和Safari瀏覽器，moz是Firefox瀏覽器的私有屬性。
transform中文意思轉換，含有多個屬性值，其中rotate表示旋轉，其餘一些屬性如scale-尺寸放大縮小（本文將會用到），skew表示傾斜角度，translate表移動距離。例如，本例中，rotate(10deg)表示順時針旋轉10度，若是要逆時針旋轉，使用負值就能夠了。
box-shadow表示盒陰影，其有四個參數，第一個參數表示水平偏移，例如2px表示投影右偏移2像素，第二個參數表示垂直偏移，2px表示投影向下偏移2像素，第三個參數表示模糊的大小，第四個參數爲rgba顏色值，例如 rgba(135, 139, 144, 0.4)，括號內四個值分別指代r(red),g(green),b(blue),a(opacity)，這裏表示透明度爲40%的一種灰色。

上面代碼在Safari瀏覽器下的表現以下：

若是您當前瀏覽器爲Safari3.5+，或是chrome，Safari，您能夠狠狠地點擊這裏：基礎旋轉投影效果demo

3、使用transition給單個圖片添加懸停動畫
有別於上面基礎效果CSS代碼，這裏須要添加一個transition的樣式，告訴瀏覽器，這裏要有動畫效果。先看一下此相關的CSS代碼：

.pic{
    display:block; width:256px; margin:60px 0 0; padding:10px 10px 15px; text-align:center;
    background:white; border:1px solid #bfbfbf;
    -webkit-transform:rotate(10deg); -moz-transform:rotate(10deg); transform:rotate(10deg);
    -webkit-box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4); -moz-box-shadow:2px 2px 3px 
       rgba(135, 139, 144, 0.4); box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4); -webkit-transition:all 0.5s ease-in; }
.pic:hover,.pic:focus,.pic:active{
    border-color:#9a9a9a; -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); 
     transform:rotate(0deg);
}

代碼部分最關鍵的就是：-webkit-transition:all 0.5s ease-in;目前而言，transition僅webkit核心的瀏覽器支持，因此此效果僅在chrome或是Safari下有。
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

熟悉flash顯示與動畫編程的應該知道，這裏的過渡類型的含義與flash中緩動類型（遠不及flash豐富）是一致的：
linear //線性過分
ease-in //由慢到快
ease-out //由快到慢
ease-in-out //由慢到快在到慢

額外的些知識：timing-funciton的幾種過分類型都是基於cubic-bezier的某些特定數值。好比ease-in-out的類型它也能夠寫成cubic-bezier(0.42, 0, 0.58, 1.0)。參見這裏http://www.w3.org/TR/css3-transitions/#transition-timing-function_tag。
transition還支持CSS僞類。

因此，-webkit-transition:all 0.5s ease-in表示的意思就是全部的屬性都執行過渡效果，像角度啊，投影大小，邊框色或是下面要講到的比例啦等，執行時間爲0.5秒，過渡動畫類型爲先慢後快。

若是您當前瀏覽器爲Safari3.5+，或是chrome，Safari，您能夠狠狠地點擊這裏：單張圖片的鼠標懸停旋轉動畫demo

4、多張美女圖的transition旋轉效果
上面講的是一張圖片的鼠標懸停旋轉效果，如今咱們在頁面上放它個十幾張圖片，層疊排列，豈不是很酷。見下圖：

核心的CSS代碼與上面的一致，多的就是種圖片的絕對定位佈局了。這裏很少說。

若是您當前瀏覽器爲Safari3.5+，或是chrome，Safari，您能夠狠狠地點擊這裏：多張圖片的鼠標懸停旋轉動畫demo

5、單張圖片的旋轉拉近動畫效果
這裏對動畫效果作了進一步的升級，更酷了。描述爲：鼠標通過圖片，圖片不只旋轉，並且圖片的投影拉長，圖片比例變大，因而造成了圖片從牆面上浮起來的炫酷效果。

若是您當前瀏覽器爲Safari3.5+，或是chrome，Safari，您能夠狠狠地點擊這裏：單張圖片的旋轉懸浮效果demo

核心的CSS代碼以下：

.pic{
    display:block; width:256px; margin:60px 0 0; padding:10px 10px 15px; text-align:center; 
       background:white; border:1px solid #bfbfbf;
    -webkit-transform:rotate(10deg); -moz-transform:rotate(10deg); transform:rotate(10deg);
    -webkit-box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4); -moz-box-shadow:2px 2px 3px 
       rgba(135, 139, 144, 0.4); box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4);
    -webkit-transition:all 0.5s ease-in;
}
.pic:hover,.pic:focus,.pic:active{
    border-color:#9a9a9a;
    -webkit-box-shadow:15px 15px 20px rgba(50, 50, 50, 0.4); -moz-box-shadow:15px 15px 20px 
       rgba(50, 50, 50, 0.4); box-shadow:15px 15px 20px rgba(50, 50, 50, 0.4);
    -webkit-transform:rotate(0deg) scale(1.05); -moz-transform:rotate(0deg) scale(1.05); 
          transform:rotate(0deg) scale(1.05);
}

對比三和五部分的CSS代碼，您會發現，這裏的CSS的hover部分發生了些變化，首先增長的盒陰影樣式，box-shadow:15px 15px 20px rgba(50, 50, 50, 0.4);加大了投影的偏移，以及模糊的大小，同時投影的顏色也加深了。另外就是transform:rotate(0deg) scale(1.05);增長了scale屬性，scale(1.05)表示1.05倍於原來的尺寸顯示。而這些變化在webkit核心的瀏覽器下都是動畫顯示的，因而就有了圖片的拉伸懸浮效果。

6、最後的圖片牆懸浮超酷動畫
如今講單個圖片的懸浮效果應用到15個美女圖片上，就有了本文最終的美女圖片牆的圖片旋轉懸浮動畫效果了。
若是您當前瀏覽器爲Safari3.5+，或是chrome，Safari，您能夠狠狠地點擊這裏：圖片牆旋轉懸浮效果demo
每張美女圖片所在的a標籤採用絕對定位，鼠標通過改變z-index層級使其頂層顯示。有了CSS3，實現效果就是這麼簡單。

7、最後本身的些總結
我是很興奮啊，不過寫到這裏，個人腎上腺素貌似又回到了正常水平，雖然說CSS3的一些特性真是很是的好，可是，並非很完美的說。首先，瀏覽器的支持，要是全部的瀏覽器都支持transition，那才真正的普天同慶，但不知還要等多久。即便chrome瀏覽器支持transform的旋轉，可是，您可能注意到了，旋轉圖片的鋸齒很明顯，文字也是扭曲（Firefox下尤其明顯）了。

關於transition，若是您有興趣，能夠去w3c去看一看，裏面有相對比較詳細的介紹：http://www.w3.org/TR/css3-transitions/

總之，CSS3中蘊含的潛力無限，等着您我挖掘探尋了……

原創文章，轉載請註明來自張鑫旭-鑫空間-鑫生活[http://www.zhangxinxu.com]