# Свойство transition-property

Свойство `transition-property` устанавливает свойство, которое будет анимироваться плавным переходом `transition`. Значением следует передавать имя CSS свойства, которое будет анимироваться. Если задать значение `all` (оно задано по умолчанию) - будут анимированы все свойства сразу.

## Синтаксис

`селектор { transition-property: значение; }`

## Пример

Наведите мышкой на блок - он плавно изменит свою ширину, так как `transition-property` имеет значение `width`:

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

:

## Пример . Значение all

В данном примере `transition-property` имеет значение `all` - поэтому плавно изменяться будут все свойства, написанные для состояния `hover` (в нашем случае это `width` и `height`). Все изменения будут проходить за одно время, которое задано в `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; }`

:

## Смотрите также

- свойство `transition-duration`,
  которое задает длительность плавного перехода
- свойство `transition-delay`,
  которое задает задержку перед плавным переходом
- свойство `transition-timing-function`,
  которое задает временную функцию для плавного перехода
- свойство `transition`,
  которое является сокращением для плавного перехода
- свойство `animation`,
  с помощью которого можно сделать анимацию

←→
↑