тк 3 июля праздник (в беларуси), буду не онлайн (по возможности буду отвечать)

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