animation-delay
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
Экспериментальная возможность: Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.
Описание
CSS свойство animation-delay определяет время задержки перед стартом анимации.
Интерактивный пример
animation-delay: 250ms; animation-delay: 2s; animation-delay: -2s; <section class="flex-column" id="default-example"> <div>Animation <span id="playstatus"></span></div> <div id="example-element">Select a delay to start!</div> </section> #example-element { background-color: #1766aa; color: white; margin: auto; margin-left: 0; border: 5px solid #333; width: 150px; height: 150px; border-radius: 50%; display: flex; justify-content: center; align-items: center; flex-direction: column; } #playstatus { font-weight: bold; } .animating { animation-name: slide; animation-duration: 3s; animation-timing-function: ease-in; animation-iteration-count: 2; animation-direction: alternate; } @keyframes slide { from { background-color: orange; color: black; margin-left: 0; } to { background-color: orange; color: black; margin-left: 80%; } } "use strict"; window.addEventListener("load", () => { const el = document.getElementById("example-element"); const status = document.getElementById("playstatus"); function update() { status.textContent = "delaying"; el.className = ""; window.requestAnimationFrame(() => { window.requestAnimationFrame(() => { el.className = "animating"; }); }); } el.addEventListener("animationstart", () => { status.textContent = "playing"; }); el.addEventListener("animationend", () => { status.textContent = "finished"; }); const observer = new MutationObserver(() => { update(); }); observer.observe(el, { attributes: true, attributeFilter: ["style"], }); update(); }); Значение 0s, которое является значением по умолчанию, указывает на то, что анимация должна начаться непременно. В противном случае, старт анимации будет отложен на указанное время.
При указании отрицательного значения, анимация также начнётся непременно, но её воспроизведение начнётся не с первого ключевого кадра, а так, будто часть анимации уже была показана. Например, если вы укажете значение -1s, анимация будет начата с ключевого кадра, когда 1 секунда анимации уже была воспроизведена.
| Начальное значение | 0s |
|---|---|
| Применяется к | все элементы, ::before и ::after псевдоэлементы |
| Наследуется | нет |
| Обработка значения | как указано |
| Animation type | Not animatable |
Синтаксис
animation-delay: 3s; animation-delay: 2s, 4ms; Значения
<time>-
Время задержки перед стартом анимации. Может быть определено в секундах (s), либо в миллисекундах (ms). Если вы не укажите единицу измерения, свойство будет недействительным.
Формальный синтаксис
Примеры
Посмотрите CSS-анимации для примера.
Спецификации
| Specification |
|---|
| CSS Animations Level 1 # animation-delay |