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

Свойство transition-delay

Свойство transition-delay устанавливает задержку перед запуском плавного перехода transition.

Данное свойство входит в свойство-сокращение transition.

Синтаксис

селектор { transition-delay: время в s или ms; }

Значения

Значение Описание
s Задает время в секундах (например 3s). Можно задавать дробные значения, например, 0.5s - половина секунды.
ms Задает время в миллисекундах (например 3ms). Одна секунда - это 1000 миллисекунд.

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

Пример

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

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

:

Пример

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

<div id="elem"></div> #elem { border: 1px solid black; transition-duration: 2s, 4s; transition-property: width, height; transition-delay: 0s, 3s; width: 100px; height: 25px; } #elem:hover { width: 400px; height: 50px; }

:

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

  • свойство transition-property,
    которое задает имя свойства для плавного перехода
  • свойство transition-duration,
    которое задает длительность плавного перехода
  • свойство transition-timing-function,
    которое задает временную функцию для плавного перехода
  • свойство transition,
    которое является сокращением для плавного перехода
  • свойство animation,
    с помощью которого можно сделать анимацию