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

Синтаксис

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

селектор {
	transition: width 2s linear 5s | none;
}

Для анимирования нескольких CSS свойств следует задавать значения через запятую:

селектор {
	transition: width 2s linear 5s, height 3s ease 2s;
}

Можно задать плавные переходы сразу для всех свойств:

селектор {
	transition: all 2s linear 5s;
}

Значения

См. соответствующие свойства.

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

Значение по умолчанию: all 0s ease 0s.

Примеры

Пример

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

#elem {
	border: 1px solid black;
	-moz-transition: width 2s ease 3s;
	-webkit-transition: width 2s ease 3s;
	transition: width 2s ease 3s;
	width: 100px;
	height: 50px;
}
#elem:hover {
	width: 400px;
}

Результат выполнения кода:

Пример

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

Обратите внимание на то, что для ширины не задана задержка (это необязательный параметр) и она будет равна нулю. А для высоты задано два времени 4s и 3s - первое число будет временем выполнения, а второе - задержкой перед выполнением. Временная функция для ширины не задана и будет иметь значение по умолчанию - ease, а для высоты - linear:

#elem {
	border: 1px solid black;
	-moz-transition: width 2s, height 4s linear 3s;
	-webkit-transition: width 2s, height 4s linear 3s;
	transition: width 2s, height 4s linear 3s;
	width: 100px;
	height: 25px;
}
#elem:hover {
	width: 400px;
	height: 50px;
}

Результат выполнения кода: