Свойство CSS transition-delay
Как использовать свойство CSS transition-delay для задания времени начала эффекта перехода. Значения свойства и примеры использования.
Свойство CSS transition-delay определяет, сколько времени нужно подождать перед началом эффекта перехода после того, как произошло инициирующее изменение. Это одно из четырёх подробных свойств, составляющих сокращение transition, наряду с transition-property, transition-duration и transition-timing-function.
На этой странице рассматриваются значения свойства, поведение положительных и отрицательных задержек, задание отдельной задержки для каждого анимируемого свойства и наиболее распространённые варианты использования в реальных интерфейсах. Это одно из свойств CSS3.
Как работает задержка
Значение по умолчанию — 0s, то есть эффект перехода начинается немедленно при изменении значения свойства (например, при :hover).
Положительная задержка откладывает начало перехода. При transition-delay: 2s в течение двух секунд ничего видимого не происходит; только после этого свойство начинает анимироваться от старого значения к новому в течение transition-duration.
Отрицательная задержка допустима и работает иначе: переход начинается немедленно, но на середине своей временной шкалы, как если бы он уже выполнялся в течение этого времени. Таким образом, transition-duration: 4s с transition-delay: -2s сразу прыгает на середину и завершается за оставшиеся две секунды.
Задержка не повторяется — в отличие от итерации анимации, переход выполняется один раз при каждом изменении, поэтому задержка применяется только к единственному запуску, который инициирует это изменение.
Современные браузеры поддерживают это свойство без вендорных префиксов.
| Начальное значение | 0s |
|---|---|
| Применяется к | Всем элементам, псевдоэлементам ::before и ::after. |
| Наследуется | Нет. |
| Анимируемо | Нет. |
| Версия | CSS3 |
| DOM-синтаксис | object.style.transitionDelay = "3s"; |
Синтаксис
transition-delay: time | initial | inherit;Базовый пример
Этот блок увеличивается при наведении курсора. Задержка равна 0s, поэтому увеличение начинается немедленно — измените значение на 1s в редакторе, чтобы почувствовать разницу.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 150px;
height: 150px;
background: #8ebf42;
transition-property: width;
transition-duration: 1s;
transition-delay: 0s;
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<h2>Transition-delay property example</h2>
<p>Hover over the element to see the effect.</p>
<div></div>
</body>
</html>Пример с задержкой 2 секунды
Здесь блок ждёт две полные секунды после наведения курсора, прежде чем начать увеличиваться. Обратите внимание, что transition-property перечисляет несколько свойств в виде списка, разделённого запятыми (width, height).
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 150px;
height: 150px;
background: #8ebf42;
transition-property: width, height;
transition-duration: 3s;
transition-delay: 2s;
}
div:hover {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<h2>Transition-delay property example</h2>
<p>Hover over the element and wait 2 seconds to see the effect.</p>
<div></div>
</body>
</html>Разная задержка для каждого свойства
При анимации нескольких свойств можно задать каждому собственную задержку, перечислив значения в том же порядке, что и в transition-property. Список задержек сопоставляется со списком свойств: здесь width начинает сразу, тогда как background-color ждёт одну секунду.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 150px;
height: 150px;
background: #8ebf42;
transition-property: width, background-color;
transition-duration: 1s, 1s;
transition-delay: 0s, 1s;
}
div:hover {
width: 300px;
background-color: #1c8470;
}
</style>
</head>
<body>
<h2>Staggered transition-delay</h2>
<p>Hover: the width grows first, then the color changes a second later.</p>
<div></div>
</body>
</html>Распространённые варианты использования
- Ступенчатые анимации, при которых несколько элементов (или несколько свойств одного элемента) движутся последовательно, а не одновременно, создавая более изысканный эффект.
- Меню с задержкой при наведении. Небольшая задержка при сворачивании выпадающего меню (часто в паре с задержкой на
visibility) ненадолго удерживает меню открытым, чтобы случайное движение мыши мимо не закрывало его. - Отрицательные задержки для запуска эффекта уже «в процессе» — полезны, когда нужно, чтобы элемент сразу оказался в определённой точке своего перехода.
Значения
| Значение | Описание |
|---|---|
| time | Задаёт количество секунд или миллисекунд, которые должны пройти перед началом эффекта перехода. Значение по умолчанию — 0s. |
| initial | Устанавливает свойство в его значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |