css властивість animation-delay
Властивість animation-delay встановлює час очікування перед запуском циклу анімації. Значення 0s або 0ms запускає анімацію відразу ж. Негативне значення також вмикає анімацію без затримок, але може привести до зміни виду початку анімації. Наприклад, задаючи значення 5s, ми встановлюємо, що анімація запуститься після 5-ти секунд очікування.
Ви можете запустити анімацію у конкретний момент в майбутньому, відразу після її присвоєння елементу або відразу після початку циклу демонстрації анімації.
Допустимо вказувати кілька значень, перераховуючи їх через кому.
| Порада: | Рекомендується використовувати універсальну властивість |
| Порада: | Зверніть увагу, що порядок у визначенні властивості має дуже важливий. Перше значення у формі часу, розглядається як |
Синтаксис
animation-delay: time|initial|inherit;Властивість animation-delay може отримувати 3 значення:
| Значення без задання: | 0s |
|---|---|
| Наслідує: | Ні |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.animationDelay="1s" |
Переглядачі
| Переглядач | ||||||
|---|---|---|---|---|---|---|
| animation-delay | 43.0 |
10.0 |
16.0 |
9.0 |
12.10 |
12.0 |
| Переглядач | |||
|---|---|---|---|
| animation-delay | 2.0 -webkit- |
16.0 |
9.2 |
Мобільних переглядачів ще не додано.
Приклади
Демонстрація дії різних значень властивості
Простий приклад дії властивості
Встановлює затримку у 2 секунди
div {
-webkit-animation-delay: 2s; /* Chrome, Safari, Opera */
animation-delay: 2s;
}