| 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("ідентифікаторЕлемента").style.animationDelay
Браузери
Chrome, Safari, Android та iOS підтримують нестандартну властивість -webkit-animation-delay.
Opera до версії 12.10 підтримує нестандартну властивість -o-animation-delay.
Firefox до версії 16.0 підтримує нестандартну властивість -moz-animaition-delay.