Webkit為核心的瀏覽器的CSS樣式-----Transition

woff

-Webkit- Transition 在CSS3中這個屬性的作用是使得變化不那麼生硬，達到比較平和的過渡。而實際變化的屬性是需要我們自己手動去添加變化
這個屬性可以分解成多個CSS屬性：
（1）  -webkit-transition-timing-function     可以定義動畫的變化時間曲線
         【語法】-webkit-transition-timing-function: ease-out ,cubic-bezier(0.5,0.2,0.3,1.0);
                 
如上圖，就是一個cubic bezier曲線，cubic bezier曲線的特點是第一點始終為（0，0），最後一點始終為（1，1），而-webkit-transition-timing-function: ease-out ,cubic-bezier(0.5,0.2,0.3,1.0);這個語句裡定義的就是在控制線上的那兩點，在圖中表現為p1點和p2點。cubic-bezier（p1x ,p1y,p2x,p2y）實際上定義的是參照整個duration的百分比。
（2）-webkit-transition-property指定發生變化的屬性
        【語法】：-webkit-transition-property: propertyName如果有多個屬性的話以逗號來分隔
         eg: -webkit-transition-property: opacity;
         P.S.  這裡需要注意的是，既然已經設定了propertyName是什麼，那麼發生變化的實際一定也要是這個屬性的才行，比
                  如opacity從1變成0，否則根本就沒有效果嘍，原因很明顯。
（3）-webkit-transition-duration制定發生變化的時間
        【語法】：-webkit-transition-duration: time;如果有多個的話，以逗號來分隔
         eg: -webkit-transition-duration: 2s;
        P.S. 這裡需要說明的是，-webkit-transition-duration是同-webkit-transition-property相對應的
                eg:

1. div{
   
2.                          -webkit-transition-property: -webkit-transition,opacity;
   
3.                          -webkit-transition-duration: 4s,2s;
   
4.                       }

複製代碼

當然了，如果duration只設置了一個，那麼均適用於所有的property
（4）-webkit-transition-delay 指定在變換開始之前的時間延遲
        【語法】：-webkit-transition-delay:time;該方法的用法完全同-webkit-transition-duration
對於transition，我們可以綜合來寫，如下：
      -webkit-transition: opacity 500ms ease-out 100ms;
     參數分別為 property,duration,timing-function,delay
綜合案例：

1. 
   
2. div {
   
3.         -webkit-transition-property: opacity;
   
4.         -webkit-transition-duration: 2s;
   
5. }
   
6. div.fadeAway {
   
7.       opacity:0;
   
8. }
   
9. <div style="width:100px;height:100px;background:blue;" >      fadeAwary </div>
   

複製代碼

對於Transition，我們也可以在變換結束之後觸發webkitTransitionEnd事件，我們可以如此給一個元素綁定：
     

1. dom.addEventListener("webkitTransitionEnd",func);
   

複製代碼