Свойство 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,
с помощью которого можно сделать анимацию