CSS-свойство animation-delay определяет, когда анимация начнется (например, значение 2с, указывает, что анимация начнется через 2 секунды после старта). Значение этого свойства может быть указано в секундах (s) или миллисекундах (ms).

Значение по умолчанию: 0s
Применяется к: Все элементы, ::before и ::after псевдо-элементы
Наследование: Нет
Анимирование: Нет. Анимируемые свойства
Версия: Новый в CSS3

Синтаксис

Синтаксически свойства задаются по следующему шаблону:

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;
    /* Standard syntax */
    animation-name: moveit;
    animation-duration: 4s;
    animation-delay: 2s;
}
 
/* Chrome, Safari, Opera */
@-webkit-keyframes moveit {
    from {left: 0;}
    to {left: 50%;}
}
 
/* Standard syntax */
@keyframes moveit {
    from {left: 0;}
    to {left: 50%;}
}

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

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

В следующей таблице описаны значения этого свойства.

Значение Описание
time Определяет количество секунд (s) или миллисекунд (ms) ожидания до начала анимации. Значение по умолчанию — 0s.
initial Устанавливает это свойство в значение по умолчанию.
inherit Если указан, связанный элемент принимает вычисленное значение своего свойства родительского элемента animation-delay.

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

Свойство animation-delay поддерживается во всех основных браузерах.

Читайте также

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.