一、前言兼目錄索引

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

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

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

二、話說Transitions這廝

CSS3 transition屬性早在去年我的“

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

transiton屬性是下面幾個屬性的縮寫：

transition-property

指定過渡的屬性值，比如transition-property:opacity就是隻指定opacity屬性參與這個過渡。

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由慢到快在到慢。

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

.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這個基本上就不用鳥了，90%+的情況都用不到這個東西，所以，難得清閒，直接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屬性要是加上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就可以搞定這一些。

發光效果如下：

主要的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展示結束，的說~~

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

首先，滑鼠懸停的淡入淡出效果。

目前，非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就可以了。

效果類似，就不展示截圖了，程式碼類似，就不展示程式碼了。

當然，我們還可以做些小動畫，讓圖片自動淡入淡出的播放，不停地播放。要不停播放只要將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="ps6.jpg" />
    <img class="anim_image anim_image_bottom" src="ps4.jpg" />
</div>

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

CSS程式碼與上面的例子大同小異，這裡就不展示了，您可以去demo頁面檢視。

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

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

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

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

transition CSS程式碼組很吃得開的。

只要是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

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

八、差點忘掉的結語

雖然目前很多瀏覽器還沒有完全支援transition, transform, animation這些屬性，但是在漸進增強的原則下，其高效的動畫實現方式還是有很實際的應用價值的。你可以不妨試試，點亮你的頁面。內容較多，時間有限，文章難免有表述不準確的地方，歡迎指正。