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

правити

Переглядачі

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

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

Переглядач
transition-delay	26 <br> 1.0 -webkit-	16 <br> 4.0 -moz-	6.1 <br> 3.0 -webkit-	12.10 <br> 11.6 -o-	12.0	10

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

Переглядач
transition-delay	4.4 <br> 2.1 -webkit-	16 <br> 4.0 -moz-	3.2 -webkit-

Приклади

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

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

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

div:hover {
    width: 300px;
}