CSS свойство transition-delay

Свойство transition-delay указывает время ожидания перед запуском эффекта перехода.

Значение по умолчанию - 0s, при котором анимация запускается сразу же.

При отрицательном значении анимация также запускается без задержек.

Значением может быть время, указанное в секундах или миллисекундах, или список разделенных запятыми значений времени, которые указаны для одного элемента.

Для максимальной совместимости браузера могут быть использованы такие расширения, как -webkit- для Safari, Google Chrome и Opera (новые версии),-moz- для Firefox, -o- для более старых версий Opera.

Значение по умолчанию	0s
Применяется	Ко всем элементам, к псевдоэлементам ::before и ::after.
Наследуется	Нет
Анимируемое	Нет
Версия	CSS3
DOM синтаксис	object.style.transitionDelay = "3s";

Синтаксис

transition-delay: time | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      div {
      width: 150px;
      height: 150px;
      background: #8ebf42;
      -webkit-transition-property: width;
      -moz-transition-property: width;
      -o-transition-property: width;
      transition-property: width;
      -webkit-transition-duration: 1s;
      -moz-transition-duration: 1s;
      -o-transition-duration: 1s;
      transition-duration: 1s;
      -webkit-transition-delay: 0s;
      -moz-transition-delay: 0s;
      -o-transition-delay: 0s;
      transition-delay: 0s;
      
      div:hover {
      width: 300px;
      
    </style>
  </head>
  <body>
    <h2>Пример свойства transition-delay</h2>
    <p>Наведите курсор мыши на элемент и увидите эффект.</p>
    <div></div>
  </body>
</html>

Попробуйте сами!

Пример, где значение свойства transition-delay равно 2s:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      div {
      width: 150px;
      height: 150px;
      background: #8ebf42;
      -webkit-transition-property: width height;
      -moz-transition-property: width height;
      -o-transition-property: width height;
      transition-property: width height;
      -webkit-transition-duration: 3s;
      -moz-transition-duration: 3s;
      -o-transition-duration: 3s;
      transition-duration: 3s;
      -webkit-transition-delay: 2s;
      -moz-transition-delay: 2s;
      -o-transition-delay: 2s;
      transition-delay: 2s;
      div:hover {
      width: 300px;
      height: 300px;
    </style>
  </head>
  <body>
    <h2>Пример свойства transition-delay</h2>
    <p>Наведите курсор мыши на элемент и увидите эффект.</p>
    <div></div>
  </body>
</html>

Попробуйте сами!

Значения

Значение	Описание
time	Указывает время ожидания перед началом эффекта перехода в секундах и миллисекундах. Значение по умолчанию - 0s.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Значение элемента наследуется от родительского элемента.