CSS3 transition 過度

一個元素在不同的狀態之間進行平滑的交換

CSS3中使用transition屬性實現過度效果

一個簡單的例子：

img{
   background-image：url（"img/1.jpg"）；
}


img:hover{
  transform:rotate(180deg);          //2D轉換：順時針旋轉180°
  background-color:green;             //背景顏色：綠色
}
這樣的話鼠標懸停 圖片會立馬旋轉180°  背景顏色也會立刻顯示，沒有任何過度效果

如果我們給img元素添加以下代碼

img{
  transition：2s；     //過度：2s內完成
}

那么整個圖片旋轉的時候會顯得很完美、平滑

語法：

　　transition：過度屬性 執行時間 時間函數 延遲時間；

　　　　　　過度屬性：可選值。指定將要進行過度變換的Css屬性   

　　　　　　　　（如：tansition：tansform 2s）多個屬性過度效果 （tansition：tansform 0.2s,background 2s）也可是使用all 默認值

　　　　　　執行時間：可選值。默認值是0 指定過度效果從執行到結束使用的時間

　　　　　　時間函數：可選值 設置元素運動的速度 

　　　　　　　　　　貝塞爾曲線關鍵字：默認值ease　　linear　　ease-in　　ease-out　　ease-in-out　　cubic-bezier（）；　　　　

　　　　　　延遲時間：可選值。設置多長時間后開始執行過度。默認值是0；