CSS3 Transition

transition : property duration timing-function delay;

transition主要包含四個屬性值：

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

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

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

變換延遲時間transition-delay。

下面我們來分別介紹這四個屬性

1、transition-property

transition-property: none|all|property;

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

2、transition-duration

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

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

3、transition-timing-function

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

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

• cubic-bezier(n,n,n,n) 在 cubic-bezier 函數(shù)中定義自己的值?？赡艿闹凳?0 至 1 之間的數(shù)值。
  

4、transition-delay

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

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

例子：

-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)聽過渡結(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)寫法