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

瀏覽器支援情形

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
transition-duration

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Requires a vendor prefix or different name for use.
Has more compatibility info.

更多資訊