# transition-duration property

The `transition-duration` property sets a smooth `transition` duration.

## Syntax

`selector { transition-duration: duration in s or ms; }`

## Values

Value | Description
--- | ---
`s` | Specifies a time in seconds (for example `3s`). You can set fractional values, for example, `0.5s` - half a second.
`ms` | Specifies a time in milliseconds (for example `3ms`). One second is `1000` milliseconds.

Default value: 0s.

## Example

Hover your mouse over the block - it will smoothly change its width in `2` seconds.

`<div id="elem"></div>` `#elem { transition-duration: 2s; transition-property: width; border: 1px solid black; height: 50px; width: 100px; } #elem:hover { width: 400px; }`

:

## See also

- the `transition-property` property
  that specifies a property name for a smooth transition
- the `transition-delay` property
  that sets a delay before a smooth transition
- the `transition-timing-function` property
  that specifies a timing function for a smooth transition
- the `transition` property
  that is a shorthand for a smooth transition
- the `animation` property
  that can be used to create animation

← →
↑
en ru