transition-duration

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

transition-duration CSS 屬性指定轉場動畫所需經歷的時間,以秒或是毫秒為單位。默認值為 0,表示沒有任何轉場動畫。

嘗試一下

你可以指定多個時間長度,每一個時間長度都會被應用在transition-property 設定的對應屬性上(which acts as a master list.) 如果指定的時間長度的數量比對應屬性的數量少,那麼時間長度就會被重複使用。反之,多餘的時間長度就會被刪去。而這兩種情況之下的 CSS 宣告都是有效的。

語法

css
/* <time> 值 */
transition-duration: 6s;
transition-duration: 120ms;
transition-duration: 1s, 15s;
transition-duration: 10s, 30s, 230ms;

/* 全域值 */
transition-duration: inherit;
transition-duration: initial;
transition-duration: unset;

<time>

<time>類型表示轉場動畫從舊狀態轉至新狀態所需要的時間。如果時間長度為 0,表示沒有任何轉場,狀態之間會立即改變。若時間長度為負值則無效。

正式語法

transition-duration = 
<time [0s,∞]>#

範例

transition-duration: 0.5s

transition-duration: 1s

transition-duration: 2s

transition-duration: 4s

規範

Specification
CSS Transitions
# transition-duration-property
預設值0s
Applies toall elements, ::before and ::after pseudo-elements
繼承與否no
Computed valueas specified
Animation typeNot animatable

瀏覽器支援情形

BCD tables only load in the browser

更多資訊