This is an experimental feature
Because this feature is still in development in some browsers, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental feature is subject to change in future version of browsers as the spec changes.


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.


transition-duration: time[, time]*

where :

Is a <time> denoting the amount of time the transition from the old value of a property to the new value should take.


There are several examples of CSS transitions included in the main CSS transitions article.


Browser compatibility

  • Desktop
  • Mobile

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

Tags (5)

Edit tags

Attachments (0)


Attach file