CSS transition-delay — затримка перед плавною зміною

Властивість transition-delay встановлює затримку перед запуском ефекту переходу. Величина затримки визначається в секундах (s) або мілісекунд (ms).

Негативне значення також включає анімацію без затримок, але може привести до зміни виду початку анімації. Наприклад, якщо задати значення 5s, результат анімації на елементі буде показаний тільки через 5 секунд.

Можна вказати кілька значень, перераховуючи їх через кому. Кожне значення застосовується до властивостей, заданих через transition-property. Змінюючи значення задане для цієї властивості, Ви налаштовуєте швидкість демонстрації ефекту. Більші значення роблять анімацію більш плавною, менші - роблять її швидшою.

правити

Загальний опис

правити

Нотатка

Завжди вказуйте властивість transition-duration, якщо цього не зробити тривалість переходу буде 0s, тому перехід не матиме ніякого ефекту.

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

transition-delay: time|initial|inherit;

Властивість transition-delay може отримувати 3 значень:

time

Задає кількість секунд або мілісекунд до початку ефекту.

автор: Svitlana

правити

initial

Встановлює цю властивість в значення без задання

автор: Svitlana

правити

inherit

Успадкує значення властивості від свого батьківського елемента

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	26	16	9	12.1	12	10

Підтримка: мобільні переглядачі

Переглядач
	4.4	26	16	9

Приклади

+ запропонувати свій приклад у пісочниці

<div>Наведи і зачекай 2 секунди</div>

div {
    width: 160px;
    padding: 8px;
    background: #0172ad;
    color: #fff;
    transition: width 1s;
    transition-delay: 2s;
}

div:hover {
    width: 300px;
}

<p>Вибери потрібне значення для <code>transition-delay</code>, а потім наведи курсор на блок, щоб побачити результат дії властивості:</p>

<input type="number" value="0" step="0.1" id="field"></input>

<div id="block">Привіт :)</div>

body {
	padding: 36px;
  text-align: center;
  line-height: 1.45;
  font-size: 20px;
  font-family: sans-serif;
}

#field {
  padding: 8px;
}

#block {
  width: 150px;
  border-radius: 4px;
  box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, .45);
  padding: 36px;
  text-align: center;
  background: gold;
  transform: rotateX(15deg);
  margin: 36px auto 0 auto;
  transition: background-color .15s ease-in 0s;
}

#block:hover {
  background-color: yellowgreen;
}

var block = document.getElementById('block');

document.getElementById('field').onchange = function () {
  block.style.transitionDelay = this.value + 's';
};
//# sourceURL=pen.js

<div class="block">
	<code>transition-delay: 0s;</code>
</div>

<div class="block block2">
	<code>transition-delay: 1s;</code>
</div>

body {
  padding: 36px;
}

.block {
  width: 400px;
  background-color: gold;
  color: #444;
  font-size: 15px;
  padding: 16px 8px;
  transition: all .15s ease-out 0s;
  margin-bottom: 36px;
}

.block2 {
  transition-delay: 1s;
}

.block:hover {
  width: 425px;
  color: red;
}