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

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

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

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

правити

Порада

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

автор: Svitlana правити

Порада

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

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

animation-delay: time|initial|inherit;

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

time

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

автор: Svitlana

правити

initial

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

автор: Svitlana

правити

inherit

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

автор: Svitlana

правити

Переглядачі

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

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

Переглядач
	43	16	9	30	12	10

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

Переглядач
	43	43	16	9

Приклади

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

<div class="box">без затримки</div>
<div class="box delayed">animation-delay: 2s</div>

.box {
    width: 220px;
    padding: 8px;
    margin-bottom: 8px;
    background: #0172ad;
    color: #fff;
    position: relative;
    animation: mymove 3s infinite;
}

.delayed {
    animation-delay: 2s;
    background: #d81b60;
}

@keyframes mymove {
    from { left: 0; }
    to   { left: 160px; }
}