CSS свойство transition

Свойство transition позволяет делать плавные переходы между двумя значениями какого-либо CSS свойства. По существу это означает простейшую анимацию. Например, если ссылка должна менять цвет при наведении на неё курсора, то можно реализовать постепенный переход от одного цвета к другому, вместо моментального изменения. В обоих случаях будет осуществляться переход от одного цвета к другому, но с помощью transition переход можно сделать постепенным. Если браузер не предоставляет поддержку данного свойства, то изменение будет моментальным.

Свойство transition устанавливает эффект перехода между двумя состояниями элемента, они могут быть определены с помощью псевдокласса :hover или :active, а также динамически через JavaScript.

Примечание: Свойство transition является короткой записью для определения значений четырех свойств: transition-property, transition-duration, transition-timing-function и transition-delay. Следует всегда указывать значение для свойства transition-duration, так как, если не указать это значение, то продолжительность перехода будет равна нулю и никакого эффекта не будет.

CSS синтаксис

transition: transition-property transition-duration transition-timing-function transition-delay | initial | inherit;

Возможные значения

Значение	Описание
transition-property	Определяет CSS свойство, для которого будет применён эффект перехода.
transition-duration	Определяет продолжительность эффекта перехода в секундах (s) или миллисекундах (ms).
transition-timing-function	Определяет кривую скорости для эффекта перехода.
transition-delay	Определяет задержку, когда начнётся эффект перехода.
inherit	Значение наследуется от родительского элемента.
initial	Устанавливает значение по умолчанию.

Пример использования

Сделаем, чтобы при наведении мышки на элемент <div>, он плавно менял свою ширину со 100px до 300px


div {
    width: 100px;
    -webkit-transition: width 2s; /* Safari 3.1-6.0 */
    transition: width 2s;
}

 div:hover {
    width: 300px;
}