Свойство animation-delay CSS

Определение и использование

animation-delay Свойство определяет, когда анимация начинается.

Значения property animation-delay измеряются в секундах или миллисекундах.

Совет:Разрешены отрицательные значения, -2s позволяет анимации начать сразу, пропустив 2 секунды до начала анимации.

См. также:

CSS3 учебник:Анимация CSS

HTML DOM справочник:Свойство animationDelay

Пример

Пример 1

Ожидайте 2 секунды, затем начнется анимация:

div {
  animation-delay: 2s;
}

Попробуйте сами

Пример 2

Отрицательные значения, обратите внимание, что анимация пропускает 2 секунды до начала цикла анимации:

div {
  animation-delay: -2s;
}

Попробуйте сами

CSS синтаксис

animation-delay: time;
Значение Описание Тест
time Выборочно. Определяет время ожидания до начала анимации, измеряемое в секундах или миллисекундах. Значение по умолчанию равно 0. Тест

Технические детали

Значение по умолчанию: 0
Инерция: нет
Версия: CSS3
JavaScript синтаксис: object.style.animationDelay="2s"

Поддержка браузеров

Числа в таблице указывают на первую версию браузера, которая полностью поддерживает этот атрибут.

Числа с префиксами -webkit-, -moz- или -o- указывают на первую версию, использующую префикс.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
43.0
4.0 -webkit-		 10.0 16.0
5.0 -moz-		 9.0
4.0 -webkit-		 30.0
15.0 -webkit-
12.0 -o-