| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | ||
| 10.0+ | 3.0+ | 12.0+ | 12.10+ | 4.0+ | 5.0+ | 16.0+ | 3.0+ | 2.0+ |
Краткая информация
| Значение по умолчанию | 0s |
|---|---|
| Наследуется | Нет |
| Применяется | Ко всем элементам, к псевдоэлементам ::before и ::after |
| Ссылка на спецификацию | http://dev.w3.org/csswg/css3-animations/#animation-delay |
Версии CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Описание
Свойство animation-delay устанавливает время ожидания перед воспроизведением анимации. Значение 0s или 0ms, которое установлено по умолчанию, запускает анимацию сразу же, как только она применяется к элементу. Отрицательное значение также включает анимацию без задержек, но приводит к изменению последовательности начала анимации.
Допустимо указывать несколько значений, перечисляя их через запятую. Каждое значение будет применяться к свойству, заданному в параметрах animation-name.
Синтаксис
animation-delay: <время>[, <время>]*
Значения
См. время.
Пример
HTML5CSS3IE 10+CrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>animation-delay</title>
<style>
@-webkit-keyframes flash {
0%, 100% {opacity: 1;}
50% {opacity: 0;}
}
@-moz-keyframes flash {
0%, 100% {opacity: 1;}
50% {opacity: 0;}
}
@-o-keyframes flash {
0%, 100% {opacity: 1;}
50% {opacity: 0;}
}
@keyframes flash {
0%, 100% {opacity: 1;}
50% {opacity: 0;}
}
.flash {
-webkit-animation-name: flash;
-moz-animation-name: flash;
-o-animation-name: flash;
animation-name: flash;
/* Задержка перед началом */
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
-o-animation-delay: 1s;
animation-delay: 1s;
/* Продолжительность анимации */
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
}
</style>
</head>
<body>
<h1 class="flash">Добро пожаловать!</h1>
</body>
</html>Объектная модель
[window.]document.getElementById("elementID").style.animationDelay
Браузеры
Chrome, Safari, Android и iOS поддерживают нестандартное свойство -webkit-animation-delay.
Opera до версии 12.10 поддерживает нестандартное свойство -o-animation-delay.
Firefox до версии 16.0 поддерживает нестандартное свойство -moz-animaition-delay.