Примечание: не поддерживается в IE9 и более ранних версиях.
CSS свойство transition-delay указывает задержку перед началом анимации перехода. Задержка указывается в секундах(s) или миллисекундах(ms).
Если в качестве значения задержки указано 0s, 0ms или отрицательное значение, анимация перехода начнётся сразу как только значение определённого в transition-property свойства изменится.
Допускается указывать более одной задержки перед эффектом перехода, через запятую. Каждое новое значение задержки применяется к соответствующему свойству в том порядке, который определён в свойстве transition-property. Если список задержек меньше, чем количество свойств в transition-property, задержка эффекта перехода для оставшихся свойств пойдёт по второму кругу. Если определено больше задержек, чем указано свойств, то список задержек просто усекается до нужного количества.
| Значение по умолчанию: |
0 |
| Наследуется: |
нет |
| Версия: |
CSS3 |
| Синтаксис JavaScript: |
object.style.transitionDelay="2s" |
| Значение |
Описание |
| время |
Указывает, сколько секунд(s) или миллисекунд(ms) будет задержка перед началом анимации перехода. |
Пример
!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
Результат данного примера:
Наведите на красный и/или синий квадрат, чтобы увидеть эффект перехода.