animation-delay

Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

Описание

CSS свойство animation-delay определяет время задежки перед стартом анимации.

Значение 0s, которое является значением по умолчанию, указывает на то, что анимация должна начаться непременно. В противном случае, старт анимации будет отложен на указанное время.

При указании отрицательного значения, анимация также начнется непременно, но ее воспроизведение начнется не с первого ключевого кадра, а так, будто часть анимации уже была показана. Например, если вы укажете значение -1s, анимация будет начата с ключевого кадра, когда 1 секунда анимации уже была воспроизведена.

Начальное значение0s
Применяется квсе элементы, ::before и ::after псевдоэлементы
Наследуетсянет
Отображениевизуальный
Обработка значениякак указано
Animation typediscrete
Канонический порядокуникальный неоднозначный порядок, определённый формальной грамматикой

Синтаксис

animation-delay: 3s;
animation-delay: 2s, 4ms;

Значения

<time>
Время задержки перед стартом анимации. Может быть определено в секундах (s), либо в милисекундах (ms). Если вы не укажите единицу измерения, свойство будет недействительным.

Формальный синтаксис

<time>#

Примеры

Посмотрите CSS анимации для примера.

Спецификации

Спецификация Статус Комментарий
CSS Animations
Определение 'animation-delay' в этой спецификации.		 Рабочий черновик Начальное определение

Совместимость с браузерами

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (Да)-webkit
43.0		 5.0 (5.0)-moz
16.0 (16.0)		 10 12-o
12.10		 4.0-webkit
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
Basic support (Да)-webkit 5.0 (5.0)-moz
16.0 (16.0)		 ? 12-o (Да)-webkit ?

Смотрите также