css властивість transition-delay


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

Властивість `transition-delay`

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

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

Нотатка:

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

Синтаксис

transition-delay: time|initial|inherit;

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

time

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

initial

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

inherit

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

Значення без задання: 0s
Наслідує: Ні
Анімується: Ні
JavaScript синтаксис: object.style.transitionDelay="2s"

Переглядачі

Переглядач
transition-delay

26
1.0 -webkit-

10

16
4.0 -moz-

6.1
3.0 -webkit-

12.10
11.6 -o-

12.0

Переглядач
transition-delay

4.4
2.1 -webkit-

16
4.0 -moz-

3.2 -webkit-


Мобільних переглядачів ще не додано.

Приклади


Динамічний приклад впливу значень на елемент

Простий приклад роботи властивості

Як задати затримку для анімації

div { 


  -webkit-transition-delay: 2s; /* Safari */ 


  transition-delay: 2s; 


}

Додаткові посилання