Все справочники находятся в стадии наполнения. Если у вас есть идеи на счёт того как улучшить этот раздел, то вы можете оставить комментарий под конкретной записью или написать свои предложения по адресу [email protected].

animation-delay

CSSanimation-delay
mangohost

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

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

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

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

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

  • Синтаксис:
    animation-delay: <time>#
  • Значение по умолчанию: 0s
  • Применяется: ко всем элементам и псевдоэлементам ::before и ::after
  • Наследуется: нет
  • Анимируется: нет

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

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

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

CSS Animation

IE
9
0.09%
10
0.01%
11
0.44%
Edge
105
0.8%
106
3.08%
107
0.25%
Firefox
104
0.07%
105
1.51%
106
0.68%
107
0.01%
108
0%
Chrome
105
6.01%
106
15.7%
107
0.64%
108
0.02%
109
0.01%
Safari
15.6
1.63%
16.0
0.5%
16.1
0.07%
16.2
0%
TP
0%
Safari on iOS
15.6
6.72%
16.0
4.55%
16.1
0.24%
Chrome for Android
107
40.28%

Примечание

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

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

Пример

mangohost