transition : property duration timing-function delay;

transition主要包含四個(gè)屬性值：

指定CSS屬性的name：transition-property;

需要指定多少秒或毫秒才能完成：transition-duration;

在延續(xù)時(shí)間段，變換的速率變化transition-timing-function;

變換延遲時(shí)間transition-delay。

下面我們來(lái)分別介紹這四個(gè)屬性

1、transition-property

transition-property: none|all|property;

• none 沒(méi)有屬性會(huì)獲得過(guò)渡效果。
  
• all 所有屬性都將獲得過(guò)渡效果。
  
• property 定義應(yīng)用過(guò)渡效果的 CSS 屬性名稱列表，多個(gè)以逗號(hào)分隔。
  

2、transition-duration

單位為s（秒）或者ms(毫秒)

注意：transition-duration屬性必須指定值，否則持續(xù)時(shí)間為0，transition不會(huì)有任何效果。

3、transition-timing-function

此屬性允許一個(gè)過(guò)渡效果，以改變其持續(xù)時(shí)間的速度。

• linear 規(guī)定以相同速度開(kāi)始至結(jié)束的過(guò)渡效果（等于 cubic-bezier(0,0,1,1)）。
  
• ease 規(guī)定慢速開(kāi)始，然后變快，然后慢速結(jié)束的過(guò)渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
  
• ease-in 規(guī)定以慢速開(kāi)始的過(guò)渡效果（等于 cubic-bezier(0.42,0,1,1)）。
  
• ease-out 規(guī)定以慢速結(jié)束的過(guò)渡效果（等于 cubic-bezier(0,0,0.58,1)）。
  
• ease-in-out 規(guī)定以慢速開(kāi)始和結(jié)束的過(guò)渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
  

• cubic-bezier(n,n,n,n) 在 cubic-bezier 函數(shù)中定義自己的值。可能的值是 0 至 1 之間的數(shù)值。
  

4、transition-delay

指定秒或毫秒數(shù)之前要等待切換效果開(kāi)始，單位為秒(s)或毫秒(ms)

如果我們想改變兩個(gè)或多個(gè)css屬性，我們只需把幾個(gè)transition的聲明以列表的形式連在一起，用逗號(hào)（,）隔開(kāi)，然后各自可以設(shè)置自己不同的延續(xù)時(shí)間等屬性。

例子：

-moz-transition:width .8s linear,color .3s ease-in;
-webkit-transition:width .8s linear,color .3s ease-in;
-o-transition:width .8s linear,color .3s ease-in;
transition:width .8s linear,color .3s ease-in;

5、監(jiān)聽(tīng)過(guò)渡結(jié)束

/*在jQuery中*/
$(element).on("webkitTransitionEnd mozTransitionEnd MSTransitionEnd oTransitionEnd animationend",fn());

/*原生js*/
element.addEventListener("webkitTransitionEnd",fn())  // Chrome, Safari 和 Opera
element.addEventListener("mozTransitionEnd",fn())  //標(biāo)準(zhǔn)寫(xiě)法