| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |||
| 10.0 + | 1.0 + | 26.0 + | 11.6 + | 12.10 + | 3.0 + | 4.0 + | 16.0 + | 2.1 | 2.0 + |
Коротка інформація
| Значення за умовчанням | 0s |
|---|---|
| Успадковується | Ні |
| Застосовується | До всіх елементів, до псевдоелементи :: before і :: after |
| відсоткова запис | незастосовні |
| Посилання на специфікацію | http://dev.w3.org/csswg/css-transitions/#transition-delay |
Версії CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Опис
Властивість transition-delay уста авлівает час очікування перед запуском ефекту переходу. Значення 0s або 0ms запускає анімацію відразу ж. Негативне значення також включає анімацію без затримок, але може привести до зміни виду початку анімації.
Припустимо вказувати кілька значень, перераховуючи їх через кому. Кожне значення буде застосовуватися до властивості, заданому в параметрах transition-property .
Синтаксис
transition-delay: <час> [, <час> ] *
Значення
Див. час .
Приклад
HTML5 CSS3 IE 10 + Cr Op Sa Fx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
transition-delay </title>
<style>
#bar {top: -5.5em; right: 5em; /* Положення */ padding: .5em; /* Поля */ margin: 0; /* Відступ */ position: absolute; /* Абсолютне позиціонування */ width: 2em; /* Ширина */ background: #333; /* Колір фону */ color: #fff; /* Колір тексту */ text-align: center; /* Вирівнювання по центру */ /* Анімація */ -webkit-transition: .4s ease-out; -webkit-transition-delay: 0.5s; -o-transition: .4s ease-out; -o-transition-delay: 0.5s; -moz-transition: .4s ease-out; -moz-transition-delay: 0.5s; transition: .4s ease-out; transition-delay: 0.5s; } #Bar: hover {top: 0; } </style>
</head>
<body>
<ul id="bar">
<li>
1 </li>
<li>
2 </li>
<li>
3 </li>
<li>
4 </li>
<li>
↓ </li>
</ul>
</body>
</html>
В даному прикладі при наведенні курсору на стрілку, розкривається блок з числами.
Об'єктна модель
[window.] document.getElementById (" elementID "). style.transitionDelay
Браузери
Chrome до версії 26.0, Safari, Android і iOS підтримують нестандартне властивість - webkit-transition-delay .
Opera до версії 12.10 підтримує нестандартне властивість -o-transition-delay .
Firefox до версії 16.0 підтримує нестандартне властивість - moz-transition-delay .