Свойство CSS animation-delay
Пример
Запустить анимацию через 2 секунды:
div {
animation-delay: 2s;
}
Другие примеры «Попробуйте сами» ниже.
Определение и использование
Свойство animation-delay
указывает задержку начала анимации.
Значение задержки анимации определяется в секундах (с) или миллисекундах (мс).
Значение по умолчанию: | 0 с |
---|---|
Унаследовано: | нет |
Анимация: | нет. Читать об анимации |
Версия: | CSS3 |
Синтаксис JavaScript: | объект .style.animationDelay="1s" |
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает это свойство.
Цифры, за которыми следует -webkit-, -moz- или -o-, указывают на первую версию, которая работала с префиксом.
Property | |||||
---|---|---|---|---|---|
animation-delay | 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- |
Синтаксис CSS
animation-delay: time|initial|inherit;
Значения свойств
Value | Description | Play it |
---|---|---|
time | Optional. Defines the number of seconds (s) or milliseconds (ms) to wait before the animation will start. Default value is 0. Negative values are allowed. If you use negative values, the animation will start as if it had already been playing for N seconds/milliseconds. | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Дополнительные примеры
Пример
Использование отрицательных значений. Здесь анимация начнется так, как если бы она уже проигрывалась в течение 2 секунд:
div {
animation-delay: -2s;
}
Связанные страницы
Учебное пособие по CSS: CSS-анимации
Справочник по HTML DOM: свойство animationDelay