| 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: <час> [, <час> ] *
Значення
Див. час .
Приклад
HTML5 CSS3 IE 10 + Cr Op Sa Fx
<!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 .