css3動畫屬性中的transition屬性

1、語法

transition: property duration timing-function delay;

值	描述
transition-property	規定設置過渡效果的 CSS 屬性的名稱。
transition-duration	規定完成過渡效果須要多少秒或毫秒。
transition-timing-function	規定速度效果的速度曲線。
transition-delay	定義過渡效果什麼時候開始。

 

 

 

 

一、color: 經過紅、綠、藍和透明度組件變換（每一個數值處理）如：background-color,border-color,color,outline-color等css屬性；

二、length: 真實的數字 如：word-spacing,width,vertical-align,top,right,bottom,left,padding,outline-width,margin,min-width,min-height,max-width,max-height,line-height,height,border-width,border-spacing,background-position等屬性；

三、percentage:真實的數字 如：word-spacing,width,vertical-align,top,right,bottom,left,min-width,min-height,max-width,max-height,line-height,height,background-position等屬性；

四、integer離散步驟（整個數字），在真實的數字空間，以及使用floor()轉換爲整數時發生 如：outline-offset,z-index等屬性；

五、number真實的（浮點型）數值，如：zoom,opacity,font-weight,等屬性；

六、transform list:詳情請參閱：《CSS3 Transform》

七、rectangle:經過x, y, width 和 height（轉爲數值）變換，如：crop

八、visibility: 離散步驟，在0到1數字範圍以內，0表示「隱藏」，1表示徹底「顯示」,如：visibility

九、shadow: 做用於color, x, y 和 blur（模糊）屬性,如：text-shadow

十、gradient: 經過每次中止時的位置和顏色進行變化。它們必須有相同的類型（放射狀的或是線性的）和相同的中止數值以便執行動畫,如：background-image

十一、paint server (SVG): 只支持下面的狀況：從gradient到gradient以及color到color，而後工做與上面相似

十二、space-separated list of above:若是列表有相同的項目數值，則列表每一項按照上面的規則進行變化，不然無變化

1三、a shorthand property: 若是縮寫的全部部分均可以實現動畫，則會像全部單個屬性變化同樣變化

具體什麼css屬性能夠實現transition效果，在W3C官網中列出了全部能夠實現transition效果的CSS屬性值以及值的類型，你們能夠點這裏瞭解詳情。這裏須要提醒一點是，並非什麼屬性改變都爲觸發transition動做效果，好比頁面的自適應寬度，當瀏覽器改變寬度時，並不會觸發transition的效果。但上述表格所示的屬性類型改變都會觸發一個transition動做效果。

 

2、瀏覽器兼容性

IE10之後支持

demo：點擊按鈕的時候，導航會收起。此時寬度發生變化，經過css3的transition屬性，給他一個過渡效果。

 

3、代碼

左側欄和內容區都須要設置動畫，動畫時間要一致，這樣不會形成因時間不一致而閃動