Примечание: не поддерживается в IE9 и более ранних версиях.
Свойство CSS transition-delay - это ваш инструмент для контроля времени. Оно позволяет задать паузу перед тем, как начнется плавная анимация перехода между состояниями элемента. Такая задержка измеряется либо в секундах (s), либо в миллисекундах (ms).
Если вы укажете значение 0s, 0ms или любое отрицательное число, анимация запустится мгновенно, без малейшей промедления, сразу после изменения свойства, указанного в transition-property.
Здесь есть небольшой нюанс для гибкой настройки: вы можете задать несколько задержек, разделяя их запятыми. Каждое новое значение будет применяться к соответствующему свойству строго в том порядке, который прописан в transition-property. Если список задержек короче списка свойств, значения будут циклически повторяться до тех пор, пока все свойства не получат свою паузу. А если задержек больше, чем свойств, лишние значения просто игнорируются.
| Значение по умолчанию: | 0 |
| Наследуется: | нет |
| Версия: | CSS3 |
| Синтаксис JavaScript: | object.style.transitionDelay="2s" |
| Значение | Описание |
| время | Определяет длительность ожидания (в секундах или миллисекундах) до старта анимации. |
Пример !DOCTYPE html html head meta charset="utf-8" titleНазвание документа/title style div { width: 100px; height: 100px; } #test1 { background-color: red; transition-property: width; transition-duration: 2s; transition-delay: 1s; } #test1:hover { width: 300px; } #test2 { background-color: blue; transition-property: width, height; transition-duration: 2s, 6s; transition-delay: 3s; } #test2:hover { width: 300px; height: 300px; } /style /head body pНаведите на красный и/или синий квадрат, чтобы увидеть эффект перехода.p div id="test1"/div div id="test2"/div /body /html Посмотрите, как это работает на практике:
Наведите курсор на красный или синий квадрат и наблюдайте за эффектом перехода.