一、過渡（transition）

CSS3 過渡是元素從一種樣式逐漸改變為另一種的效果。這個定義有種熟悉的感覺，它彷彿和animation非常相似，那麼他們實際上有何區別呢？

1、CSS animation 與 CSS transition 的區別

（1）元素指定Transiton時，那麼當其某個屬性改變的時候就會按照Transition指定的方式進行過渡，動畫就這麼產生了。

　　Animation也是通過指定某一個屬性（如width、left、transform等）在兩個值之間如何過渡來實現動畫的。

（2）指定Animation時可以通過keyframe顯式控制當前幀的屬性值，而Transition只能隱式來進行（不能指定每幀的屬性值），所以相對而言Animation的功能更加靈活。

（3）另外一個區別是Animation通過模擬屬性值改變來實現動畫，動畫結束之後元素的屬性沒有變化；

　　而Transition確實改變了元素的屬性值，動畫結束之後元素的屬性發生了變化；

　　這一點，這在實際應用中會產生很大的區別，也決定了二者各有用處。或者這麼說吧：

　　transition - 強調過渡 - 需要觸發一個事件，比如滑鼠移上去、焦點、點選。

　　animation - 多個關鍵幀，實現自由動畫 - 不需要觸發任何事件也可隨時間變化達到一種動畫效果；

　　與transition不同是animation可以通過@keyframe控制當前幀屬性，更靈活。

3、Transition 作用是指定了某一個屬性（如width、left、transform等）在兩個值之間如何過渡，他包括transition-property、transition-duration、transition-timing-function、transition-delay等。

　　其實：Transform和width、left一樣，定義了元素很多靜態樣式，只不過通過Transition和Animation指定如何改變不同的屬性值，才實現了動畫。

　　為了成功實現過渡，你需要規定將哪個效果新增到哪個CSS屬性上，而且一定要記著規定效果時長。過渡效果通常在使用者將滑鼠指標浮動到元素上時發生。

4、過渡的幾個屬性

　　可以單獨設定 transition 在這一個屬性中設定四個過渡屬性，也可以直接用transition-property，transition-duration，transition-timing-function， transition-delay這幾個屬性來設定。

div{
    transition: width 1s linear 2s;
}
div{
    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 2s;
}

1、transition-property: none|all|property;

none	沒有屬性會獲得過渡效果。
all	所有屬性都將獲得過渡效果。
property	定義應用過渡效果的 CSS 屬性名稱列表，列表以逗號分隔。

2、transition-duration: time;

　　這條屬性規定了完成過渡效果需要花費的時間（以秒或毫秒計），其預設值為0，因此，請始終設定transition-duration屬性，否則時長為 0，就不會產生過渡效果。

3、transition-timing-function

4、transition-delay: time;

　　它規定在過渡效果開始之前需要等待的時間，以秒或毫秒計。

5、transition: property duration timing-function delay;

　　預設值為：all 0 ease 0（最後一個 delay 0 可省略）

5、觸發方式

（1）最簡單使用transition的方法就是和CSS偽元素一起用

（2）用程式新增和刪除class

二、CSS 過渡進階

　　CSS3的過渡屬性，給web應用帶來了簡單優雅的動畫，但是比起初次相見，他（transition）有許多細則。這裡我將會專研CSS3的過渡（transition）中更加複雜的部分，從鏈式和事件到硬體加速和動畫函式。讓瀏覽器控制動畫序列，通過改變幀率，減少繪畫和減少GPU的工作，能夠優化效能和效率。

1、過渡漸變

　　不是所有的CSS屬性都能過渡，最基本的規則是你只能過渡絕對值。比如，你不能讓height從 0px過渡到auto，瀏覽器不能計算中間過度值，因此屬性變化是瞬間的。

2、硬體加速

　　過渡某個屬性，比如left和margin會導致瀏覽器每幀都會重新計算樣式。這消耗相當昂貴，並且可能會導致不必要的重繪，特別是如果你在螢幕上有很多元素。這在低效能裝置上顯得特別明顯，比如手機。

　　這個解決方案是使用CSS過渡來減少渲染給GPU帶來的壓力。簡單來說，這在過渡的時候，將元素變成了一張圖片，避免任何樣式重新計算，這極大程度上增加了效能。一個簡單強迫瀏覽器用硬體渲染一個元素的方法是，設定轉型的Z軸，這個你可以用translate3d：

transform: translate3d(0,0,0);

　　不過這不是根治效能的方法，並且會帶來許多本身的問題。只有當需要的時候，你才應該用硬體加速，並且完全不需要在每個元素上都使用它。

　　比如，硬體加速會導致微妙的字型問題，比如一個字型出現的時候失去了加粗效果。這是因為一個bug，當元素開啟硬體加速的時候，不支援子畫素抗鋸齒。你可以看到在兩個渲染模式下的一個清晰的差別。

　　如果你在瀏覽器之間因為硬體加速而有了顯示問題，比如閃爍或者顫動，確保你沒有用transform3d()的CSS屬性在元素上。

3、時間函式

　　到目前為止，我們用了一些瀏覽器預定義時間函式linear, ease, ease-in, ease-out和ease-in-out。對於更多複雜的時間函式來說，我們要寫我們自己的時間函式，通過定義貝塞爾曲線的4個關鍵點。

transition: -webkit-transform 1s cubic-bezier(.17,.67,.69,1.33);

4、過渡結束後的回撥事件

　　如果步奏是鏈式過渡，是過渡結束後回撥。你可以在Webkit中獲得這個狀態，通過監聽webkitTransitionEnd這個事件。

var callback = function () {
    // ...
}
$(this).one('webkitTransitionEnd', callback)
$(this).css(properties);