transition過渡
transition簡介
- transition用來定義元素樣式變換時的過渡效果。
- css3的transition允許CSS的屬性值在一定的時間區間內平滑地過渡。這種效果可以在鼠標單擊，獲得焦點，被點擊或對元素任何改變中觸發，並平滑地以動畫效果改變CSS的屬性值。
寫法
transition:[<transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay>]
-
transition-property：指定過渡的CSS屬性。
-
transition-property:no | all | <single-transition-property> -
none：沒有指定任何樣式。
-
all：默認值，表示指定元素所有支持transition-property屬性的樣式。
-
<single-transition-property>：指定一個或多個樣式。(多個樣式用逗號隔開）
-
-
transition-duration：指定完成過渡所需的時間。
-
transition-duration:<time> -
<time>為數值，單位為s(秒)或ms(毫秒)，默認值是0。當有多個過渡屬性時，可以設置多個過渡時間分別應用過渡屬性，也可以設置一個過渡時間應用所有過渡屬性。
-
-
transition-timing-function：指定過渡調速函數。
-
transition-timing-function:<single-transition-timing-function> -
<single-transition-timing-function>指單一的過渡函數，主要包括下面幾個屬性值。 -
ease：默認值，元素樣式從初始狀態過渡到終止狀態時速度由快到慢，逐漸變慢。
-
linear：元素樣式從初始狀態過渡到終止狀態速度是恆速。
-
ease-in：元素樣式從初始狀態過渡到終止狀態時，速度越來越快，呈一種加速狀態。這種效果稱為漸顯效果。
-
ease-out：元素樣式從初始狀態過渡到終止狀態時，速度越來越慢，呈一種減速狀態。這種效果稱為漸隱效果。
-
ease-in-out：元素樣式從初始狀態到終止狀態時，先加速再減速。這種效果稱為漸顯漸隱效果。
-
-
transition-delay：指定過渡開始出現的延遲時間。
-
transition-delay:<time> -
transition-delay：用來指定一個動畫開始執行的時間，也就是說當改變元素屬性值后多長時間開始執行過渡效果，它可以是正整數，負整數和0，非零的時候必須將單位設置為s(秒)或ms(毫秒)。
正整數時好理解，就是延遲幾秒開始執行過渡，負整數時，將元素的之前時間截斷，也就是transition-duration過渡時間所用的值減去transition-delay的延遲值，這中間的值不會發生，直接跳到剩下的值進行過渡。
-
-
transition屬性類似於border，font這些屬性，可以簡寫，也可以單獨來寫。簡寫時，各函數之間用空格隔開，且需要按一定的順序排列。