css3動畫屬性中的transition屬性

transition: property

duration
timing-function
delay;

描述transition-property

規定設定過渡效果的 css 屬性的名稱。

transition-duration

規定完成過渡效果需要多少秒或毫秒。

transition-timing-function

規定速度效果的速度曲線。

transition-delay

定義過渡效果何時開始。

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

2、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等屬性；

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

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

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

6、transform list:詳情請參閱：《css3 transform》

7、rectangle:通過x, y, width 和 height**為數值）變換，如：crop

8、visibility: 離散步驟，在0到1數字範圍之內，0表示「隱藏」，1表示完全「顯示」,如：visibility

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

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

11、paint server (svg): 只支援下面的情況：從gradient到gradient以及color到color，然後工作與上面類似

12、space-separated list of above:如果列表有相同的專案數值，則列表每一項按照上面的規則進行變化，否則無變化

13、a shorthand property: 如果縮寫的所有部分都可以實現動畫，則會像所有單個屬性變化一樣變化

二、瀏覽器相容性

ie10以後支援

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

三、**

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

css3中的動畫屬性

一 過渡動畫 transition 過渡動畫，就是能讓css樣式的變化，體現的更明顯一點，讓使用者能更清晰的看見樣式的變化。過渡的實現我們一般通過事件來觸發 例如滑鼠單擊 獲得焦點 被點選或對元素任何改變中觸發 1.transition property 檢索或設定物件中的參與過渡的屬性 all為預...

css3動畫屬性

定義動畫 from to 等同於0 100 keyframes myfirst to webkit keyframes myfirst safari 和 chrome to 將動畫繫結到選擇器 div keyframes 規定動畫。animation 所有動畫屬性的簡寫屬性，除了 animation...

CSS3動畫屬性

2d 3d 轉換屬性 transform 過渡屬性 transition 動畫屬性 animation transform 屬性向元素應用 2d 或 3d 轉換。該屬性允許我們對元素進行旋轉 縮放 移動或傾斜。2d轉換 matrix n,n,n,n,n,n 定義 2d 轉換，使用六個值的矩陣。tra...