# transition-property property

The `transition-property` property sets a property that will be animated by a smooth `transition`. The value should be the name of the CSS property that will be animated. If you set the value to `all` (it is set by default), all properties will be animated at once.

## Syntax

`selector { transition-property: value; }`

## Example

Hover the mouse over the block - it will smoothly change its width, since `transition-property` has the `width` value:

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

:

## Example . The all value

In this example, `transition-property` has the `all` value - therefore, all properties written for the `hover` state will smoothly change (in our case, these are `width` and `height`). All changes will occur in one time, which is specified in `transition-duration`:

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

:

## See also

- the `transition-duration` property
  that sets a duration of 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