### **Transition** **定義：**css的transition允許css的屬性值在一定的時間區間內平滑地過渡。這種效果可以在鼠標單擊、獲得焦點、被點擊或對元素任何改變中觸發，并圓滑地以動畫效果改變CSS的屬性值。” **語法：** **transition ： transition-property || transition-duration || transition-timing-function || transition-delay** transition主要包含四個屬性值： 1. 執行變換的屬性：transition-property, 2. 變換延續的時間：transition-duration, 3. 在延續時間段，變換的速率變化transition-timing-function, 4. 變換延遲時間transition-delay <br/> <br/> **一、transition-property**：指定當元素其中一個屬性改變時，執行transition效果 **語法：** transition-property ： none | all | ident **注意：** 1.none(沒有屬性改變) ，當其值為none時，transition馬上停止執行； 2.all（所有屬性改變），這個頁是其默認值，當指定為all時，則元素產生任何屬性值變化時都將執行transition效果 3.ident是可以指定元素的某一個屬性值。 網址：[css屬性可以實現transition效果列表](https://www.w3.org/TR/css3-transitions/#properties-from-css-) <br/> <br/> **二、transition-duration**：指過渡效果花費的時間。 取值：<time>為數值，單位為s（秒）或者ms(毫秒),可以作用于所有元素，包括:before和:after偽元素。其默認值是0，也就是變換時是即時的 <br/> <br/> **三、transition-timing-function**值元素的過渡的效果，有6個屬性值： 1、ease：（逐漸變慢）默認值，ease函數等同于貝塞爾曲線(0.25, 0.1, 0.25, 1.0). 2、linear：（勻速），linear 函數等同于貝塞爾曲線(0.0, 0.0, 1.0, 1.0). 3、ease-in：(加速)，ease-in 函數等同于貝塞爾曲線(0.42, 0, 1.0, 1.0). 4、ease-out：（減速），ease-out 函數等同于貝塞爾曲線(0, 0, 0.58, 1.0). 5、ease-in-out：（加速然后減速），ease-in-out 函數等同于貝塞爾曲線(0.42, 0, 0.58, 1.0) 6、cubic-bezier：（該值允許你去自定義一個時間曲線）， 特定的cubic-bezier曲線。 (x1, y1, x2, y2)四個值特定于曲線上點P1和點P2。所有值需在[0, 1]區域內，否則無效。 <br/> <br/> **四、transition-delay**：指過渡效果何時開始。取值：秒（毫秒）或0，默認是 0也就是變換立即執行，沒有延遲。 綜合上述我們可以給transition一個速記法：transition: <property> <duration> <animation type> <delay>如下圖所示：  兼容行寫法： ~~~ //Mozilla內核 -moz-transition ： //Webkit內核 -webkit-transition ： //Opera -o-transition ： //w3c標準寫法 transition ： ~~~