css властивість transition-delay
Властивість transition-delay встановлює затримку перед запуском ефекту переходу. Величина затримки визначається в секундах (s) або мілісекунд (ms).
Негативне значення також включає анімацію без затримок, але може привести до зміни виду початку анімації. Наприклад, якщо задати значення 5s, результат анімації на елементі буде показаний тільки через 5 секунд.
Можна вказати кілька значень, перераховуючи їх через кому. Кожне значення застосовується до властивостей, заданих через transition-property. Змінюючи значення задане для цієї властивості, Ви налаштовуєте швидкість демонстрації ефекту. Більші значення роблять анімацію більш плавною, менші - роблять її швидшою.
| Нотатка: | Завжди вказуйте властивість |
Синтаксис
transition-delay: time|initial|inherit;Властивість transition-delay може отримувати 3 значення:
| Значення без задання: | 0s |
|---|---|
| Наслідує: | Ні |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.transitionDelay="2s" |
Переглядачі
| Переглядач | ||||||
|---|---|---|---|---|---|---|
| transition-delay | 26 |
10 |
16 |
6.1 |
12.10 |
12.0 |
| Переглядач | |||
|---|---|---|---|
| transition-delay | 4.4 |
16 |
3.2 -webkit- |
Мобільних переглядачів ще не додано.
Приклади
Динамічний приклад впливу значень на елемент
Простий приклад роботи властивості
Як задати затримку для анімації
div {
-webkit-transition-delay: 2s; /* Safari */
transition-delay: 2s;
}