css中的transition屬性

2021-10-22 23:11:09 字數 1335 閱讀 8871

過渡transition是乙個復合屬性,包括transition-property、transition-duration、transition-timing-function、transition-delay這四個子屬性。通過這四個子屬性的配合來完成乙個完整的過渡效果。

1.transitions提供了一種在更改css屬性時控制動畫速度的方法。 其可以讓屬性變化成為乙個持續一段時間的過程,而不是立即生效的。

2.css transitions 可以決定哪些屬性發生動畫效果 (明確地列出這些屬性),何時開始 (設定 delay),持續多久 (設定 duration) 以及如何動畫 (定義timing funtion,比如勻速地或先快後慢)。

例如把滑鼠指標放到 div 元素上,其寬度會從 100px 逐漸變為 300px:

div過渡transition的這四個子屬性只有是必需值且不能為0。其中,和都是時間。當兩個時間同時出現時,第乙個是,第二個是;當只有乙個時間時,它是,而為預設值0。

transition-property

值: none | all | transition-property[,transition-property]

(1)none: 沒有指定任何樣式

(2)all: 預設值,表示指定元素所有支援transition-property屬性的樣式

(3)transition-property: 可過渡的樣式,可用逗號分開寫多個樣式

transition-duration

值: time[,time]*

(1)初始值: 0s

(2)該屬性的單位是秒s或毫秒ms

(3)該屬性若不能為負值

(4)若該屬性為0s則為預設值,若為0則為無效值。所以必須帶單位

(5)該值為單值時,即所有過渡屬性都對應同樣時間;該值為多值時,過渡屬性按照順序對應持續時間

transition-delay

值: time[,time]*

(1)初始值: 0s

(2)該屬性定義元素屬性延遲多少時間後開始過渡效果,該屬性的單位是秒s或毫秒ms

(3)該屬性若為負值,無延遲效果,但過渡元素的起始值將從0變成設定值(設定值=延遲時間+持續時間)。若該設定值小於等於0,則無過渡效果;若該設定值大於0,則過渡元素從該設定值開始完成剩餘的過渡效果

(4)若該屬性為0s則為預設值,若為0則為無效值。所以必須帶單位

(5)該值為單值時,即所有過渡屬性都對應同樣時間;該值為多值時,過渡屬性按照順序對應持續時間

transition的這四個子屬性之間不能用逗號隔開,只能用空格隔開。因為逗號隔開的代表不同的屬性(transition屬性支援多值,多值部分稍後介紹);而空格隔開的代表不同屬性的四個關於過渡的子屬性。

css3中的過渡(transition)

css3 transition 過渡 1.語法 transition transition property transition duration transition timing function transition delay transition property 檢索或設定物件中的參與...

CSS3中的transition屬性詳解

transition property duration timing function delay transition 屬性是個復合屬性,她包括以下幾個子屬性 atransition property none all property 值為 none 時,沒有屬性會獲得過渡效果,值為 all ...

css3動畫屬性中的transition屬性

transition property duration timing function delay 值 描述transition property 規定設定過渡效果的 css 屬性的名稱。transition duration 規定完成過渡效果需要多少秒或毫秒。transition timing ...