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


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

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

Допустимо вказувати кілька значень, перераховуючи їх через кому.

Порада:

Рекомендується використовувати універсальну властивість animation, щоб задавати всі властивості відразу в одному місці. Це робить стилі більш зрозумілішими та зменшує їхній обсяг.

Порада:

Зверніть увагу, що порядок у визначенні властивості має дуже важливий. Перше значення у формі часу, розглядається як animation-duration, а друге - як animation-delay.

Синтаксис

animation-delay: time|initial|inherit;

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

time

Необов`язково. Визначає кількість секунд/мілісекунд до початку анімації

initial

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

inherit

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

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

Переглядачі

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

43.0
3.0 -webkit-

10.0

16.0
5.0 -moz-

9.0
4.0 -webkit-

12.10
12.0 -0-

12.0

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

2.0 -webkit-

16.0
5.0 -moz-

9.2
4.0 -webkit-


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

Приклади


Демонстрація дії різних значень властивості

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

Встановлює затримку у 2 секунди

div {


   -webkit-animation-delay: 2s; /* Chrome, Safari, Opera */ 


  animation-delay: 2s; 


}

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