English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Атрибут animation-delay CSS3 определяет, когда начнется воспроизведение анимации (например, значение 2s означает, что анимация начнется через 2 секунды после применения). Значение может быть указано в секундах (s) или миллисекундах (ms).
В таблице ниже приведен обзор контекста использования и истории версий этого свойства.
| Значение по умолчанию: | 0s |
|---|---|
| Доступно для: | Все элементы::before и::after Псевдоэлементы |
| Инherit: | Нет |
| Анимированные: | Нет.См. также Анимационные свойства. |
| Версия: | Новая функция CSS3 |
| JavaScript грамматика: | object object.style.animationDelay="2s" |
Грамматика этого свойства такая:
animation-delay: time | initial | inherit
Ниже приведен пример того, как использовать атрибут animation-delay.
.box {
width: 50px;
height: 50px;
background: red;
position: relative;
/* Chrome, Safari, Opera */
-webkit-animation-name: moveit;
-webkit-animation-duration: 4s;
-webkit-animation-delay: 2s;
animation-name: moveit;
animation-duration: 4s;
animation-delay: 2s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes moveit {
from {left: 0;}
to {left: 50%;}
}
@keyframes moveit {
from {left: 0;}
to {left: 50%;}
}Проверьте, посмотрите‹/›Примечание:Этот параметр позволяет использовать отрицательные значения. Однако, он似乎 начинает выполняться в середине цикла анимации, например, анимация с задержкой -2s начинает выполняться немедленно, но выполняется через 2 секунды после начала анимации.
В таблице ниже описаны значения этого свойства.
| Значение | Описание |
|---|---|
| time | Определить количество секунд или миллисекунд, которые нужно подождать до начала анимации. По умолчанию значение равно 0s. |
| initial | Установить этот параметр в его значение по умолчанию. |
| inherit | Если задан, то связанный элемент использует вычисленное значение свойства animation-delay родительского элемента. |
Совместимость браузеров для свойства animation-delay, все основные браузеры поддерживают это свойство.
|
Пожалуйста, обратитесь к следующим руководствам:CSS3 анимации.
Связанные свойства и правила:animation,animation-name,animation-duration,animation-timing-function,animation-iteration-count,animation-direction,animation-fill-mode,animation-play-state,@keyframes.