Свойство 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, които представляват анимация при посочване на елемент