Свойство animation-delay - задержка перед запуском анимации
Свойство animation-delay устанавливает
задержку перед запуском анимации.
Синтаксис
селектор {
animation-delay: время в s или ms;
}
Значения
| Значение | Описание |
|---|---|
s |
Задает время в секундах (например 3s). |
ms |
Задает время в миллисекундах (например 3ms). Одна секунда - это 1000 миллисекунд. |
Значение по умолчанию: 0s.
Пример
В данном примере перед началом анимации будет
задержка в 3 секунды:
<div id="elem"></div>
@keyframes move {
from {
margin-left: 0;
}
to {
margin-left: 400px;
}
}
#elem {
animation-delay: 3s;
animation-duration: 6s;
animation-name: move;
animation-iteration-count: infinite;
animation-timing-function: linear;
border: 1px solid black;
width: 50px;
height: 50px;
}
:
Смотрите также
-
свойство
animation-name,
которое задает имя анимации -
свойство
animation-duration,
которое задает продолжительность анимации -
свойство
animation-timing-function,
которое задает скорость выполнения анимации -
свойство
animation-iteration-count,
которое задает количество итераций анимации -
свойство
animation-direction,
которое задает направление анимации -
свойство
animation-fill-mode,
которое задает состояние анимации -
свойство
animation-play-state,
которое позволяет поставить анимацию на паузу -
свойство
animation,
представляющее собой сокращение для анимаций -
команду
@keyframes,
задающую ключевые кадры анимации -
плавные переходы
transition, представляющие собой анимацию по наведению на элемент