Свойства CSS

Меню

transition-delay

Поддержка браузерами

12.0+ 10.0+ 16.0+ 26.0+ 12.1+ 6.1+

Описание

CSS свойство transition-delay указывает задержку перед началом анимации перехода. Задержка указывается в секундах(s) или миллисекундах(ms).

Если в качестве значения задержки указано 0s, 0ms или отрицательное значение, анимация перехода начнётся сразу как только значение определённого в transition-property свойства изменится.

Допускается указывать более одной задержки перед эффектом перехода, через запятую. Каждое новое значение задержки применяется к соответствующему свойству в том порядке, который определён в свойстве transition-property. Если список задержек меньше, чем количество свойств в transition-property, задержка эффекта перехода для оставшихся свойств пойдёт по второму кругу. Если определено больше задержек, чем указано свойств, то список задержек просто усекается до нужного количества.

Значение по умолчанию: 0
Применяется: ко всем элементам
Анимируется: нет
Наследуется: нет
Версия: CSS3
Синтаксис JavaScript: object.style.transitionDelay="2s"

Синтаксис

transition-delay: время|inherit;

Значения свойства

Значение Описание
время Указывает, сколько секунд(s) или миллисекунд(ms) будет задержка перед началом анимации перехода.
inherit Указывает, что значение наследуется от родительского элемента.

Пример


<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Пример</title>
  <style>
    div { width: 100px; height: 100px; }
    #test1 {
      background-color: red;
      transition-property: width;
      transition-duration: 2s;
      transition-delay: 1s;
    }
    #test1:hover { width: 300px; }

    #test2 {
      background-color: blue;
      transition-property: width, height;
      transition-duration: 2s, 6s;
      transition-delay: 3s;
    }
    #test2:hover { width: 300px; height: 300px; }
  </style>
</head>
<body>

  <p>Наведите на красный и/или синий квадрат, чтобы увидеть эффект перехода.<p>
  <div id="test1"></div>

  <div id="test2"></div>

</body>
</html>

Результат данного примера:

Наведите на красный и/или синий квадрат, чтобы увидеть эффект перехода.