CSS :: Свойство animation-delay
css-свойство animation-delay (от англ. animation delay – задержка анимации) устанавливает время задержки перед запуском анимации.
Характеристики
- Значение по умолчанию: 0s.
- Применяется: ко всем элементам, а также к псевдоэлементам ::before и ::after.
- Наследуется: нет.
- Анимируется: нет.
- JavaScript: object.style.animationDelay="value".
Синтаксис
animation-delay: <время>[, <время>]*
Значения
В качестве значения свойство animation-delay принимает время, указанное в секундах (s) или миллисекундах (ms). Если указано нулевое значение времени (используется браузером по умолчанию), то анимация запускается без задержек. Также разрешается использовать отрицательные значения, но с ними нужно быть осторожными, т.к. это может привести к изменению вида анимации в начальной стадии процесса. Кроме того, допускается указывать несколько значений, перечисленных через запятую (для каждой отдельной анимации). Значения без указания единиц времени не разрешаются.
Ссылки
Официальный сайт W3C: https://www.w3.org/TR/css-animations-1/#animation-delay
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/animation-delay
Примеры
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> <style> div{ margin-top: 2em; overflow: hidden; white-space: nowrap; padding: 1em; width: 460px; height: 50px; border: solid 4px red; } /* Задаем общие свойства анимации */ .anim{ animation-name: example_1; animation-duration: 2s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; animation-fill-mode: backwards; } /* Задаем задержку анимации */ .anim_delay_1{ animation-delay: 1s; } .anim_delay_2{ animation-delay: 2.5s; } .anim_delay_3{ animation-delay: 4500ms; } /* Анимируем ширину элемента */ @keyframes example_1{ from{ width: 0px; } to{ width: 500px; } } </style> </head> <body> <div class="anim anim_delay_1">animation-delay: 1s</div> <div class="anim anim_delay_2">animation-delay: 2.5s</div> <div class="anim anim_delay_3">animation-delay: 4500ms</div> </body> </html>
Пример №1