transition-delay

Базовая поддержка Широко доступна

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с сентября 2015 года.

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

Попробуйте

Задержка может быть нулевой, положительной или отрицательной:

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

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

Синтаксис

/* <time> values */
transition-delay: 3s;
transition-delay: 2s, 4ms;

/* Global values */
transition-delay: inherit;
transition-delay: initial;
transition-delay: revert;
transition-delay: revert-layer;
transition-delay: unset;

Значения

<time>: Определяет время ожидания между изменением значения свойства и началом эффекта перехода.

Формальное определение

Начальное значение	`0s`
Применимо к	всем элементам, `::before` и `::after` псевдоэлементам
Наследуется	нет
Вычисленное значение	как указано
Тип анимации	Не анимируемо

Формальный синтаксис

transition-delay = 
  <time>#

Примеры

Пример с различными задержками

HTML

<div class="box delay-1">0.5 seconds</div>

<div class="box delay-2">2 seconds</div>

<div class="box delay-3">4 seconds</div>

<button id="change">Change</button>

CSS

.box {
  margin: 20px;
  padding: 10px;
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: red;
  font-size: 18px;
  transition-property: background-color, font-size, transform, color;
  transition-timing-function: ease-in-out;
  transition-duration: 3s;
}

.transformed-state {
  transform: rotate(270deg);
  background-color: blue;
  color: yellow;
  font-size: 12px;
  transition-property: background-color, font-size, transform, color;
  transition-timing-function: ease-in-out;
  transition-duration: 3s;
}

.delay-1 {
  transition-delay: 0.5s;
}

.delay-2 {
  transition-delay: 2s;
}

.delay-3 {
  transition-delay: 4s;
}

JavaScript

function change() {
  const elements = document.querySelectorAll("div.box");
  for (const element of elements) {
    element.classList.toggle("transformed-state");
  }
}

const changeButton = document.querySelector("#change");
changeButton.addEventListener("click", change);

Результат

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

Спецификация
CSS Переходы # transition-delay-property

Совместимость браузеров

	Рабочий стол					Мобильный
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android
`transition-delay`	261	1212	16494–preview	12.11511.6–15	94	2618	16494	12.11412–14	92	1.51.0	4.42

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/transition-delay