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 1 | CSS 2 | CSS 2.1 | CSS 3 |
---|---|---|---|
Свойство transition-delay устанавливает время ожидания перед запуском эффекта перехода. Значение 0s или 0ms запускает анимацию сразу же. Отрицательное значение также включает анимацию без задержек, но может привести к изменению вида начала анимации.
Допустимо указывать несколько значений, перечисляя их через запятую. Каждое значение будет применяться к свойству, заданному в параметрах transition-property.
transition-delay: <время> [,<время>]*
См. время.
Пример
<!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.
Сайт