animation-delay

Общие сведения

Значение по умолчанию равное «0s» означает что анимация начнётся сразу как только будет применена к элементу. Положительное значение времени представляет собой смещение, которое определяет насколько долго будет длиться задержка между началом анимации и началом её выполнения.

Также вы можете поставить отрицательное значение в animation-delay. Отрицательное значение, такое как «0s», означает что анимация начнёт выполняться сразу после её применения, но автоматически перейдёт к абсолютному значению задержки как-будто анимация началась в указанное время в прошлом. Например, если вы установите значение «-2s» в animation-delay, то анимация начнётся мгновенно, но будет выглядеть как-будто началась 2 секунды назад.

Синтаксис свойства

• Синтаксис:

  animation-delay: <time>#

• Значение по умолчанию: 0s
• Применяется: ко всем элементам и псевдоэлементам ::before и ::after
• Наследуется: нет
• Анимируется: нет

Значения свойства

• <time> - указывает как долго продлится задержка между началом анимации и началом её выполнения. Задержка в «0s» (значение по умолчанию) означает, что анимация будет выполняться сразу же после её применения.

Поддержка браузерами

Примечание

Вы можете указать одно или несколько, разделённых запятыми, значений в animation-delay. Когда вы предоставляете список значений, этот список обычно сопоставляется со списком значений предоставляемым другими свойствами связанными с анимацией, такими как animation-direction, animation-timing-function и animation-name, и другими. Каждый список значений в этих свойствах обрабатывается как массив, в котором у каждого значения есть собственный индекс. После этого значение по индексу сопоставляется со значением из другого списка.

Свойство animation-delay обычно указывается как часть сокращённого свойства animation.

Пример