transition屬性允許css的屬性值在指定的時間內進行過度，也就是執行動畫效果。它是以hover,focus，active等偽類作為動畫觸發的條件。也就是動畫效果必須基礎懸停，點擊等事件才能觸發。 <br/> ### 參數 #### transition-property：指定過渡或動態模擬的css屬性，也就是指定究竟是哪個屬性要執行動畫效果。 1.none 沒有屬性會獲得過渡效果。 2.all 所有屬性都將獲得過渡效果。 3.property 定義應用過渡效果的 CSS 屬性名稱列表，列表以逗號分隔。 <br> #### transition-duration：指定完成過渡所需的時間。單位是秒或毫秒 <br> #### transition-timing-function：指定過渡函數 1.ease：逐漸變慢（默認值） 2.linear：勻速 3.ease-in：加速 4.ease-out：減速 5.ease-in-out：先加速后減速  <br> #### transition-delay：開始執行動畫的延遲時間，單位是秒或毫秒 說完了transition的屬性，下面就該說如何使用transition來完成動畫 效果。這里就需要用到偽類來作為動畫的觸發條件了。 偽類中指定了動畫的最終樣式。 ~~~ div:hover{ border-radius:0;//為了方便這里沒有寫css hack } ~~~ 上述代碼指定了動畫效果完成之后圓角為0。 ~~~ div{ width:100px; height:100px; border-radius:50px;//設置動畫的初始樣式 transition-property:border-radius;//指定需要執行動畫的屬性 transition-duration:2s;//整個動畫完成需要2s transition-timing-function：linear//勻速 transition-delay:.2s//延遲0.2s } ~~~ 當鼠標移動到div上時，在經過0.2秒的延遲之后div勻速從正方形變成圓形，整個動畫(不包括延遲)花費2秒。 如果property參數為all，那么所有與偽類相同的屬性都將會執行動畫效果。 <br/> 也可以將transition所有屬性都寫在一起 ~~~ div{ width:100px; height:100px; border-radius:50px; transition:border-radius 2s linear .2s; } ~~~ transition自然避免不了要寫兼容各瀏覽器的hack，所以為了減少工作量還是盡量把屬性都寫在一起。