Свойство CSS animation-delay
Свойство CSS animation-delay определяет, когда начнётся анимация. Анимация может начаться позже, немедленно или перепрыгнуть к определённой точке на временной шкале (с использованием отрицательной задержки).
Свойство animation-delay является одним из свойств CSS3.
Значение по умолчанию — 0. Отрицательные значения допускаются. При использовании отрицательных значений анимация начнётся так, как будто она уже проигрывалась в течение N секунд/миллисекунд.
Если для свойства анимации указано несколько значений, разделённых запятыми, они циклически повторяются, чтобы соответствовать количеству анимаций, определённых в animation-name.
Если keyframes анимации не содержат начального значения, браузер использует вычисленные стили элемента в момент начала анимации.
| Свойство | Значение |
|---|---|
| Начальное значение | 0s |
| Применяется ко | Всем элементам, псевдоэлементам ::before и ::after. |
| Наследуется | Нет. |
| Анимировано | Нет. |
| Версия | CSS3 |
| Синтаксис DOM | object.style.animationDelay = "1s"; |
Синтаксис
Синтаксис свойства CSS animation-delay
animation-delay: time | initial | inherit;Пример свойства animation-delay:
Пример свойства CSS animation-delay
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 120px;
height: 120px;
background: #1c87c9;
position: relative;
animation: delay 5s infinite;
animation-delay: 3s;
}
@keyframes delay {
from {
left: 0px;
}
to {
left: 300px;
}
}
</style>
</head>
<body>
<h2>Animation-delay example</h2>
<p>Here the animation starts after 3 seconds.</p>
<div></div>
</body>
</html>Пример свойства animation-delay со значением со знаком минус:
Пример свойства CSS animation-delay со значением со знаком минус
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: #ccc;
position: relative;
animation: delay 5s infinite;
animation-delay: -2s;
}
@keyframes delay {
from {
left: 0px;
}
to {
left: 300px;
}
}
</style>
</head>
<body>
<h2>Animation-delay example with negative value.</h2>
<p>Here, the animation will start as if it had already been playing for 2 seconds.</p>
<div></div>
</body>
</html>Пример свойства animation-delay, указанного в миллисекундах:
Пример свойства CSS animation-delay с указанием миллисекунд
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 120px;
height: 120px;
background: #8ebf42;
position: relative;
animation: delay 5s infinite;
animation-delay: 200ms;
}
@keyframes delay {
from {
left: 0px;
}
to {
left: 300px;
}
}
</style>
</head>
<body>
<h2>Animation-delay example in milliseconds.</h2>
<p>Here, the animation will start after 200ms.</p>
<div></div>
</body>
</html>Значения
| Значение | Описание | Воспроизвести |
|---|---|---|
| time | Определяет количество секунд (s) или миллисекунд (ms) ожидания перед началом анимации. Необязательный параметр. | Воспроизвести » |
| initial | Устанавливает свойству значение по умолчанию. | |
| inherit | Наследует свойство от родительского элемента. |
Практика
Какое определение свойства CSS animation-delay является правильным?