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

Определение и применение

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

Попробуйте значения transition-delay

Наведите указатель на контейнер или переведите на него фокус клавишей Tab. Меняются transform и background-color. Уведите указатель и фокус для обратного перехода; после смены значения наведите снова.

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

transition-delay: 0s

HTML и CSS примера
HTML
<div
  class="stage"
  tabindex="0"
  role="group"
  aria-label="Наведите указатель или переведите фокус сюда"
>
  <div class="demo-target">CSS</div>
</div>
CSS
* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  height: 210px;
  display: grid;
  place-items: center;
  padding: 20px;
  border: 2px dashed #607589;
  background: #edf2f5;
  color: #172c3d;
  font: 16px/1.4 system-ui;
}
.demo-target {
  width: 100px;
  height: 80px;
  display: grid;
  place-items: center;
  border: 3px solid #245a85;
  background: #ffe4bd;
  transition-property: transform, background-color;
  transition-duration: 1s;
  transition-timing-function: ease;
  transition-delay: 0s;
}
.stage:hover .demo-target,
.stage:focus .demo-target {
  transform: translateX(45px) rotate(15deg);
  background-color: #b9d7eb;
}
.stage:focus {
  outline: 3px solid #b53625;
  outline-offset: 2px;
}

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

Спецификация: CSS transitions

Поддерживается во всех основных браузерах с 2015 года.

Показать браузеры
Совместимостьcss.properties.transition-delay
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
transition-delay✓26✓12✓16✓12.1✓9✓26✓16✓12.1✓9✓1.5✓4.4✓9

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

CSS синтаксис:

CSS
transition-delay: <time>#;

/* Глобальные значения */
transition-delay: initial | inherit | unset | revert | revert-layer;

# — список через запятую.

JavaScript синтаксис:

JavaScript
element.style.transitionDelay = "300ms";

Начальное значение свойства

0s.

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

Значения transition-delay
Значение Описание
time Указывает число секунд(s) или миллисекунд(ms) ожидания перед тем, как эфект перехода начнется. Начальное значение.
Допускается указывать более одного значения задержки перед началом эффекта перехода. В этом случае значения указываются через запятую, и каждое новое значение задержки соответствует значению (в том же порядке), которое определено в свойстве transition-property. Если список задержек меньше, чем количество значений (свойств), определённых свойством transition-property, то значения задержек эффекта перехода для оставшихся свойств будут использованы еще раз (по кругу). Если определено больше задержек, чем значений, указанных в свойстве transition-property, то список задержек усекается до количества значений этого свойства.
initial Устанавливает начальное значение свойства.
inherit Наследует вычисленное значение свойства у родительского элемента.
unset Для ненаследуемого свойства transition-delay устанавливает его начальное значение.
revert Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
revert-layer Сбрасывает значение свойства для текущего слоя каскада @layer. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

Отрицательная задержка запускает переход сразу с уже пройденного участка. Например, при длительности 2s и задержке -1s переход начнётся с середины и завершится через секунду. Измените задержку в примере ниже и заново переключите флажок.

Спецификация

CSS Transitions — спецификация transition-delay.

Наследуется

Нет.

Анимируемое

Нет.

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

Переход между состояниями

Замените 800ms на 0s, 2s или -500ms и переключите флажок: положительная задержка откладывает движение, отрицательная запускает его с уже пройденного участка.

base.css
CSS
* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #172c3d;
}
section {
    margin-bottom: 24px;
    min-width: 0;
}
h3 {
    margin: 0 0 12px;
    font-size: 16px;
}
.item {
    padding: 8px;
    min-width: 0;
    background: #c5dbea;
    border: 1px solid #35658a;
    overflow-wrap: anywhere;
}
.stage {
    padding: 20px 0;
}
.sample {
    width: 100px;
    height: 70px;
    padding: 8px;
    background: #c5dbea;
}
index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Переход между состояниями</title>
  </head>
  <body>
    <input id="change" type="checkbox" />
    <label for="change">Изменить состояние</label>
    <div class="stage"><div class="sample">Блок</div></div>
  </body>
</html>
style.css
CSS
.sample {
    transition:
        transform 1s ease,
        background-color 1s ease;
    transition-delay: 800ms;
}
#change:checked ~ .stage .sample {
    transform: translateX(80px);
    background-color: #edcf99;
}