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;
值
正式語法
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 to | all elements, ::before and ::after pseudo-elements |
繼承與否 | no |
Computed value | as specified |
Animation type | Not animatable |
瀏覽器支援情形
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
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.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.