一、過渡（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);