知道了CSS3三劍客之一的transform可以用來讓原本規(guī)規(guī)矩矩的元素產生變形，平移，旋轉一樣的旋轉，接下來使用第二個特性，transition屬性，增加變化過程中的過渡效果。
并不能繼承給子類型
Transition允許CSS的屬性值在一定的時間區(qū)間內平滑地過渡。這種效果可以在鼠標單擊、獲得焦點、被點擊或對元素任何改變中觸發(fā)，并圓滑地以動畫效果改變CSS的屬性值，它的語法如下：
transition: property duration timing-function delay;
/*
property：執(zhí)行過渡的屬性
duration：執(zhí)行過渡的持續(xù)時間
timing-function：執(zhí)行過渡的速率模式
delay：延時多久執(zhí)行
*/
transition-property
可取值：
- none
沒有屬性會獲得過渡效果。 - all
所有屬性都將獲得過渡效果。 - property
定義應用過渡效果的 CSS 屬性名稱列表，列表以逗號分隔。
div{
transition-property:width;
-moz-transition-property: width;/* Firefox 4 */
-webkit-transition-property:width; /* Safari 和 Chrome */
-o-transition-property:width;
/* Opera */}
transition-duration
參數(shù)為時間，單位為s（秒）或者ms（毫秒），默認就是0，回想一下如果只有transform屬性，是不是變換啪地一下完成了。
div{
transition-duration: 5s;
-moz-transition-duration: 5s; /* Firefox 4 */
-webkit-transition-duration: 5s; /* Safari 和 Chrome */
-o-transition-duration: 5s; /* Opera */}
transition-timing-function
既然是動畫，那么就有動畫的運行速率，不同的速度會產生不同的結果，以下是可取值。
- ease：（逐漸變慢）默認值，ease函數(shù)等同于貝塞爾曲線(0.25, 0.1, 0.25, 1.0).
- linear：（勻速），linear 函數(shù)等同于貝塞爾曲線(0.0, 0.0, 1.0, 1.0).
- ease-in：(加速)，ease-in 函數(shù)等同于貝塞爾曲線(0.42, 0, 1.0, 1.0).
- ease-out：（減速），ease-out 函數(shù)等同于貝塞爾曲線(0, 0, 0.58, 1.0).
- ease-in-out：（加速然后減速），ease-in-out 函數(shù)等同于貝塞爾曲線(0.42, 0, 0.58, 1.0)
速率示意圖
transition-delay
參數(shù)為時間，單位為s（秒）或者ms（毫秒），默認就是0，也就是立即執(zhí)行，如果在多個動畫直接有先后順序，那么它就會派上用場。
把它們寫在一起
瀏覽器內核的前綴不能忘啊，使用emmet神器來幫助你。
emmet使用如圖所示：
-webkit-transition: all 0.5s ease-in-out 0s;
-o-transition: all 0.5s ease-in-out 0s;
transition: all 0.5s ease-in-out 0s;
如圖所示
將它們放在一起的效果如下，可以很明顯的發(fā)現(xiàn)它們之間的不同。
