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

Свойство CSS transition-delay указывает, когда должен начинаться эффект перехода.

Значение по умолчанию — 0s, что означает немедленный запуск эффекта перехода.

Указанный временной сдвиг задерживает начало анимации. Также допускаются отрицательные значения. Отрицательная задержка заставляет переход начинаться уже в процессе выполнения его временной шкалы.

Значение может быть указано в секундах или миллисекундах, либо в виде списка значений времени, разделённых запятыми. При указании нескольких значений они сопоставляются с соответствующими свойствами в списке transition-property. Это свойство также включено в сокращённое свойство transition.

INFO

Современные браузеры поддерживают это свойство нативно, без вендорных префиксов.

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

Синтаксис

css

transition-delay: time | initial | inherit;

Пример использования свойства transition-delay:

Пример кода CSS transition-delay

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 150px;
        height: 150px;
        background: #8ebf42;
        transition-property: width;
        transition-duration: 1s;
        transition-delay: 0s;
      }
      div:hover {
        width: 300px;
      }
    </style>
  </head>
  <body>
    <h2>Transition-delay property example</h2>
    <p>Hover over the element to see the effect.</p>
    <div></div>
  </body>
</html>

Try it Yourself »

Пример использования свойства transition-delay с задержкой в 2 секунды:

Ещё один пример кода CSS transition-delay

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 150px;
        height: 150px;
        background: #8ebf42;
        transition-property: width height;
        transition-duration: 3s;
        transition-delay: 2s;
      }
      div:hover {
        width: 300px;
        height: 300px;
      }
    </style>
  </head>
  <body>
    <h2>Transition-delay property example</h2>
    <p>Hover over the element and wait 2 seconds to see the effect.</p>
    <div></div>
  </body>
</html>

Try it Yourself »

Значения

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

Практика

Какое утверждение верно относительно свойства transition-delay?

указывает, когда эффект перехода должен завершиться.Значение по умолчанию — 0s, что означает, что эффект перехода не начнётся.Отрицательное значение запустит эффект перехода немедленно.

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

Синтаксис ​

Пример использования свойства transition-delay: ​

Пример использования свойства transition-delay с задержкой в 2 секунды: ​