# Свойство transition

Свойство `transition` - сокращение для плавных переходов, позволяет одновременно задать `transition-duration`, `transition-property`, `transition-timing-function` и `transition-delay`.

## Синтаксис

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

Порядок свойств значение не имеет, однако время выполнения (`transition-duration`) должно стоять перед задержкой (`transition-delay`).

## Значения

См. соответствующие свойства. Значение по умолчанию: `all 0s ease 0s`.

Значение `none` отменяет все переходы (они станут происходить мгновенно).

## Пример

Наведите мышкой на блок - `3` секунды ничего не будет происходить (стоит задержка 3s), а затем он плавно изменит свою ширину за `2` секунды. Если затем убрать мышь - то снова `3` секунды ничего не будет происходить, а затем ширина плавно уменьшится до исходного значения:

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

:

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

- свойство `animation`,
  с помощью которого можно сделать анимацию

←→
↑