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