Table of contents
- 1. Summary
- 2. Syntax
- 3. Examples
- 4. Specifications
- 5. Browser compatibility
- 6. See also
Summary
The transition-duration CSS property specifies the number of seconds or milliseconds a transition animation should take to complete. By default, the value is 0s, meaning that no animation will occur.
You may specify multiple durations; each duration will be applied to the corresponding property as specified by the transition-property
property, which acts as a master list. If there are fewer durations specified than in the master list, missing values are set to the initial value (0s). If there are more durations, the list is simply truncated to the right size. In both case the CSS declaration stays valid.
- Initial value
:
0s - Applies to: all elements,
:beforeand:afterpseudo elements - Inherited : no
- Media:
interactive - Computed value : as specified
Syntax
transition-duration: time[, time]*
where :
time- Is a
<time>denoting the amount of time the transition from the old value of a property to the new value should take.
Examples
There are several examples of CSS transitions included in the main CSS transitions article.
Specifications
- CSS Transitions Module Level 3 (Working Draft)
Browser compatibility
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | (Yes) -webkit | 4.0 (2.0) -moz | 10 -ms | 10.5 -o | 3.1 -webkit |
| Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | ? | ? | ? | ? | iOS 2.0 -webkit |


Mozilla Developer Network