This page was translated from English by the community. Learn more and join the MDN Web Docs community.
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 сентябрь 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). Если вы не укажите единицу измерения, свойство будет недействительным.
Формальный синтаксис
animation-delay =
<time> #
Примеры
Посмотрите CSS-анимации для примера.
Спецификации
| Specification |
|---|
| CSS Animations Level 1 # animation-delay |
Совместимость с браузерами
Loading...