CSS3 Transitions, Transforms和Animation使用簡介與應用展示

標籤：style   blog   class   code   java   tar   

by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=1268

一、前言兼目錄索引

《天龍八部》裡的虛竹小和尚之前可以說是和尚的先進人物與代表模範，各類清規戒律謹記與嚴守。但是，後來呢，花姑娘送到跟前，什麼戒律都成了浮雲，禁不住誘惑享樂去了。啊，我現在似乎有類似的感覺，本來不打算深究CSS3的一些屬性的，但是其效果以及實際應用價值之誘惑實在巨大，還是抵擋不住，折騰下了這篇文章。勞民傷財的工程越少越好，所以，這裡乾脆把CSS3 動畫相關的幾個屬性湊合到一起了，這樣，至少一年半載內不會再寫相關的文章了。

CSS3動畫相關的幾個屬性是：transition, transform, animation；我分別理解為過渡，變換，動畫。雖意義相近，但具體角色不一。就像是SHE組合，雖然都是三個女生，都唱同一首歌，但有負責高音，和擅長低音的，具體工作於角色還是有差異的。//zxx:貌似那個誰誰燒傷了，真是不幸~~

transition指過渡啦，就是從a點都b點，就像過江坐渡輪，是有時間的，是連續的，一般針對常規CSS屬性；transform指變換，就那幾個固定的屬性：旋轉啦，縮放啦，位移啦什麼的，與獨立於遠房親戚transition使用，但是，效果就是很乾澀機械的旋轉移動。要是配合transition屬性，旋轉啊什麼的，就會很平滑。animation最先安家於Safari瀏覽器，自成一家，與transition和transform有老死不相往來之感，但是要說單挑的話，animation要比transition厲害些。

目錄索引
1. 話說Transitions這廝
2. 話說Transforms這貨
3. 話說Animation這物
4. 更實際綜合的效果展示
5. 瀏覽器支援情況
6. 參考文章及延伸閱讀
7. 結語這東西

二、話說Transitions這廝

CSS3 transition屬性早在去年我的“CSS3 transition實現超酷圖片牆動畫效果”一文中就有過介紹。其作用是：平滑的改變CSS的值。無論是點擊事件，焦時間點事件，還是滑鼠hover，只要值改變了，就是平滑的，就是動畫。於是乎，只要一個整站通用的class，就可以很輕鬆的漸進增強地實現動畫效果，超有實用價值的說。

transition有下面些具體屬性：

transition-property :* //指定過渡的性質，比如transition-property:backgrond 就是指backgound參與這個過渡
transition-duration:*//指定這個過渡的期間
transition-delay:* //延遲過渡時間
transition-timing-function:*//指定過渡類型，有ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier

例如下面這個很簡單的例子：

.trans {    -webkit-transition-property: background-color;    -webkit-transition-duration: 0.3s;    -webkit-transition-timing-function: ease;}.trans:hover {    background-color: #486AAA;    color: #fff;}

結果在Safari或是Chrome瀏覽器下可以看到如下效果：

如果你正在使用或有webkit核心的瀏覽器，您可能狠狠地點擊這裡：webkit核心瀏覽器下背景色過渡demo

就跟CSS2的background屬性一樣，平時我們都不會像上面一樣，把transition的屬性一個一個攤開寫，而是合并。

還是上面的例子，我們將transition屬性合并，並擴充幾個瀏覽器，如下CSS代碼：

.trans {    ...    -webkit-transition: background-color 0.3s ease;    -moz-transition: background-color 0.3s ease;    -o-transition: background-color 0.3s ease;    transition: background-color 0.3s ease;}.trans:hover {    background-color: #486AAA;    color: #fff;}

如下HTML代碼：

<a href="/" class="trans">經過我~~</a>

結果如下（截自Opera 10.6瀏覽器）：

transition中的transition-timing-function屬性讓人心存芥蒂，其一堆ease相關的值（linear | ease-in | ease-out | ease-in-out | cubic-bezier），不太容易讓人理解與記住。尤其其中cubic-bezier就是指貝茲路徑，與複雜的數學扯上的關係，不禁勾起了高中時數學的夢魘。

其實呢，理一理，也還好。首先cubic-bezier這個基本上就不用鳥了，99%的情況都用不到這個東西，所以，難得清閑，直接pass掉。linear很好記，線性嘛。至於ease-in | ease-out | ease-in-out，就是指緩動效果啦，說白了就是指開始時候慢慢動呢還是結束的時候慢慢動。那麼in和out那個先慢慢動呢？啊，我們可以聯想記憶，很好記的。我們都知道OOXX吧，ease-in中的in就表示進入，進入的時候顯然一開始都是慢的，等瞄準就緒後才能快速衝刺進入，於是ease-in表示先慢後快；ease-out其out表示出來，出來肯定是先快後慢的，因為出來時臨近洞口速度肯定要降下來，免得跑出來亂了節奏，於是ease-out表示先快後慢；最後，很好理解的，ease-in-out表示一進一出，也就是先慢後快再慢。

有些純潔的人可能不太明白上面邪惡的文字表示的含義，沒關係，我們可以看圖說話，下面截自不同運動曲線下同一時間的，從中可以看到哪個先快，哪個先慢（注意：最後都是同時到達）：

要是你覺得上面的靜態表意不夠具體，您可以狠狠地點擊這裡：不同緩動類效果demo(Opera/Chrome/Safari)

您可以觀察方塊的運動規律，知道不同緩動名稱的效果是如何的。

以上就是transition的簡單介紹，要查看更詳細更權威的資訊，可以去官方頁面查看。

三、話說transform這貨

transform指變換，使用過photoshop的人應該知道裡面的Ctrl+T自由變換。transform就是指的這個東西，展開，壓縮，旋轉，位移。見下面範例程式碼：

.trans_skew { transform: skew(35deg); }.trans_scale { transform:scale(1, 0.5); }.trans_rotate { transform:rotate(45deg); }.trans_translate { transform:translate(10px, 20px); }

結果就有類似下面的些效果：

您可以狠狠地點擊這裡：transform些屬性效果demo

transform屬性要是加上transition的過渡特性，那可就是如虎添翼，櫻木花道配上流川楓啊，可以產生不少美妙的火花，例如下面這個例子，關鍵代碼如下：

.trans_effect {    -webkit-transition:all 2s ease-in-out;    -moz-transition:all 2s ease-in-out;    -o-transition:all 2s ease-in-out;    -ms-transition:all 2s ease-in-out;        transition:all 2s ease-in-out;}.trans_effect:hover {    -webkit-transform:rotate(720deg) scale(2,2);    -moz-transform:rotate(720deg) scale(2,2);    -o-transform:rotate(720deg) scale(2,2);    -ms-transform:rotate(720deg) scale(2,2);    transform:rotate(720deg) scale(2,2);        }

結果在Chrome預計Safari瀏覽器下就有了祖瑪裡面青蛙掛掉時的縮放旋轉效果了：

滑鼠經過時：

如果你手上有webkit核心的瀏覽器，可以狠狠地點擊這裡：酷酷的縮放旋轉動畫demo

transform還支援3D變換，怎一酷字了得。由於某些不可告人的原因，這裡就不展示了。故，transform部分到此結束。

四、話說animations這物

截止2010年11月份，animations這物似乎還是只在webkit核心的瀏覽器上起作用，所以本段落的一些demo效果，需在webkit核心瀏覽器下查看，不在重複贅述。

animations的介紹以執行個體驅動。先看簡單的縮放擴充動畫執行個體：
您可以狠狠地點擊這裡：animations水平彈性縮放變色動畫

效果大致如下，預設是個很規矩很安靜的矩形框：

滑鼠移上去後顯示慢慢的寬度增加，然後突然快速的寬度增加，同時背景色加深，下為動畫過程中的：

關鍵的CSS代碼如下：

@-webkit-keyframes resize {    0% {        padding: 0;    }    50% {        padding: 0 20px;        background-color:rgba(190, 206, 235, 0.2);            }    100% {        padding: 0 100px;        background-color:rgba(190, 206, 235, 0.9);    }}.anim_box:hover {    -webkit-animation-name: resize;    -webkit-animation-duration: 1.5s;    -webkit-animation-iteration-count: 4;    -webkit-animation-direction: alternate;    -webkit-animation-timing-function: ease-in-out;}

此例子中，滑鼠移至上方時動畫只執行4次。

animations不僅適用於CSS2中的屬性，CSS3也是支援的，例如box-shadow盒陰影製作效果，所以，我們可以實現外光暈效果的。使用過web qq的人應該有印象，當滑鼠移到聊天對象腦袋上的時候會有藍色外光暈的動畫，但是那是gif動畫圖片實現的（現在自動跳轉到web qq 2.0已看不到效果）。gif動畫實現的效果類似於下面（很相容）：

 摸左邊張含韻

但是gif的重用性有限而且製作破費功夫，如果簡單幾行CSS代碼就可以實現高效能高擴充的效果豈不更加，現在animations就可以搞定這一些。

您可以狠狠地點擊這裡：animations下的外光暈動畫demo

光暈效果如下：

主要的CSS代碼如下：

@-webkit-keyframes glow {    0% {        -webkit-box-shadow: 0 0 12px rgba(72, 106, 170, 0.5);        border-color: rgba(160, 179, 214, 0.5);             }    100% {        -webkit-box-shadow: 0 0 12px rgba(72, 106, 170, 1.0), 0 0 18px rgba(0, 140, 255, 1.0);        border-color: rgba(160, 179, 214, 1.0);     }}.anim_image {    padding:3px;    border:1px solid #beceeb;    background-color:white;    -moz-box-shadow: 0 0 8px rgba(72, 106, 170, 0.5);    -webkit-box-shadow: 0 0 8px rgba(72, 106, 170, 0.5);    box-shadow: 0 0 8px rgba(72, 106, 170, 0.5);}.anim_image:hover {    background-color:#f0f3f9;    -webkit-animation-name: glow;    -webkit-animation-duration: 1s;    -webkit-animation-iteration-count: infinite;    -webkit-animation-direction: alternate;    -webkit-animation-timing-function: ease-in-out;    }

animation展示結束，的說~~

五、更實際綜合的效果展示

首先，滑鼠移至上方的淡入淡出效果。

您可以狠狠地點擊這裡：滑鼠移至上方的淡入淡出demo

目前，非webkit核心瀏覽器下面，滑鼠移至上方僅僅是透明與不透明，只有在webkit核心瀏覽器下面才有平滑的動畫效果，如：

相關主要CSS代碼如下：

.anim_fade_image {    position:absolute;    -webkit-transition: opacity 1s ease-in-out;    -moz-transition: opacity 1s ease-in-out;    -o-transition: opacity 1s ease-in-out;    transition: opacity 1s ease-in-out;}.anim_fade_image:hover, .anim_fade_image_hover {    opacity:0;    filter: alpha(opacity=0);}

當然，我們也可以輔助JavaScript，添加點擊圖片淡出淡出。JavaScript負責的只是終了的透明度值，中間的動畫直接交給CSS就可以了。

您可以狠狠地點擊這裡：點擊下的淡入淡出demo

效果類似，就不展示了，代碼類似，就不展示代碼了。

當然，我們還可以做些小動畫，讓圖片自動淡入淡出的播放，不停地播放。要不停播放只要將animation-iteration-count設為infinite(無限)就ok的啦。於是，我們修改下CSS代碼，如下：

@-webkit-keyframes fadeInOut {    0% {        opacity:1;     }    25% {        opacity:0;    }    50% {        opacity: 0;        }    75% {        opacity:1;    }}.anim_fade_image {    position:absolute;        -webkit-animation-name: fadeInOut;    -webkit-animation-timing-function: ease-in-out;    -webkit-animation-iteration-count: infinite;    -webkit-animation-duration: 12s;    -webkit-animation-direction: alternate;}

於是乎，圖片就稀裡糊塗的不停地淡入淡出了。您有興趣可以狠狠地點擊這裡：圖片無限自動fade效果demo

以上些效果都是與透明度打交道的。下面這個執行個體是與圖片位置，比例尺寸掛鈎的，聰明的你是不是想到了transform屬性呢。對的，transform+tranisition，雙劍合璧，天下無敵。下面這個效果是很酷很酷的，以前基本上只能在Flash中可以看到。噹噹噹噹，您可以狠狠地點擊這裡：圖片輪轉縮放顯示動畫demo（滑鼠經過圖片有驚喜的說，非webkit繞道，搜狗等瀏覽器可切換到高速模式亦可）。

效果如下，為動畫過程中：

相關的核心的CSS代碼如下：

.anim_image {    -webkit-transition: all 1s ease-in-out;    -moz-transition: all 1s ease-in-out;    -o-transition: all 1s ease-in-out;    transition: all 1s ease-in-out;    cursor:pointer;}.anim_image_top {    position: absolute;    -webkit-transform: scale(0, 0);    opacity: 0;    filter: Alpha(opacity=0);}.anim_box:hover .anim_image_top , .anim_box_hover .anim_image_top {    opacity: 1;    filter: Alpha(opacity=100);    -webkit-transform: scale(1, 1);    -webkit-transform-origin: top right;        }.anim_box:hover .anim_image_bottom, .anim_box_hover .anim_image_bottom {    -webkit-transform: scale(0, 0);    -webkit-transform-origin: bottom left;}

HTML代碼如下：

<div id="testBox" class="anim_box">    <img class="anim_image anim_image_top" src="http://image.zhangxinxu.com/image/study/p/s200/ps6.jpg" />    <img class="anim_image anim_image_bottom" src="http://image.zhangxinxu.com/image/study/p/s200/ps4.jpg" /></div>

當然，這裡應用transform的旋轉，水平垂直縮放效果也是很贊的，如所示：

您可以狠狠地點擊這裡：圖片旋轉切換動畫demo

CSS代碼與上面的例子大同小異，這裡就不展示了，您可以去demo頁面查看。

下面，展示的是更加實際更加靠譜的例子，選項卡切換。
我們平時的選項卡切換基本上都是很生硬的，直接啪啪啪，切換過來了，沒有點過渡啊什麼的（畢竟寫JavaScript動畫成本較高），現在，有了transitions，實現過渡效果就是幾行CSS代碼的事情，不多說了，直接上執行個體。

您可以狠狠地點擊這裡：平滑選項卡切換demo

在demo中，點擊下面的幾個圖片文字按鈕狀的東西，就可以看到圖片水平滑過來，再滑過去，再滑過來，讓人愛不釋手啊。為：

CSS其作用的就是那個值以all開頭的transition屬性，如下：

.trans_image_box {    width: 2000px;    height: 300px;    -webkit-transition: all 1s ease-in-out;    -moz-transition: all 1s ease-in-out;    -o-transition: all 1s ease-in-out;    transition: all 1s ease-in-out;}

transitionCSS程式碼群組很吃得開的。

只要是CSS值變換的，只要是額外有transition屬性設定的，都是凹凸貼圖，都是動畫。所以，我們看看如何以動畫形式實現經典的手風琴轉場效果。

您可以狠狠地點擊這裡：手風琴效果demo（點擊水平標題有驚喜）

下為：

其中JavaScript扮演的角色只是變變高度值而已，動畫，都是CSS一人挑大樑完成的，很贊吧。下面的代碼就是動畫效果那段div上的CSS代碼：

.acco_content {    height:0;    padding:0 10px;    -webkit-transition: all 1s ease-in-out;    -moz-transition: all 1s ease-in-out;    -o-transition: all 1s ease-in-out;    transition: all 1s ease-in-out;    overflow:hidden;}

JavaScript的作用不過是變變高度而已：

$$(".acco_title").click(function() {    var rel = this.lang, cl = this.className, oOn = $$(".acco_title_on")[0], rel_on = oOn.lang;    if (!/on/.test(cl) && rel && rel_on) {        $$("#" + rel)[0].style.height = "140px";        $$("#" + rel_on)[0].style.height = "0";        this.className = "acco_title acco_title_on";        oOn.className = "acco_title";    }});

六、瀏覽器支援情況CSS Transitions

首次引入

• Safari 3.2: 13/11/2008
• Firefox 4.0: Late 2010
• Chrome 1.0: 02/09/2008
• Opera 10.5: 02/03/2010

CSS 2D Transformations

首次引入

• Safari 3.2: 13/11/2008
• Firefox 3.5: 30/06/2009
• Chrome 1.0: 02/09/2008
• Opera 10.5: 02/03/2010
• Internet Explore 9: 09/2010

CSS Animations

首次引入

• Safari 4.0: 11/06/2008
• Chrome 1.0: 02/09/2008

CSS 3D Transformations

首次引入

• Safari 4.0: 11/06/2008
• Chrome: 28/08/2010

七、參考文章以及延伸閱讀

• Understanding CSS3 Transitions
• Using CSS3 Transitions, Transforms and Animation Intro
• W3C: CSS Transitions Module Level 3
• W3C: CSS 2D Transforms Module Level 3
• W3C: CSS 3D Transforms Module Level 3
• W3C: CSS Animations Module Level 3
• Surfin’ Safari (check the archives)
• CSS3 Transitions support in Opera Presto 2.3