CSS :: Свойство transition-delay
css-свойство transition-delay (от англ. transition delay – задержка перехода) устанавливает время задержки перед началом перехода.
Характеристики
- Значение по умолчанию: 0s.
- Применяется: ко всем элементам, а также к псевдоэлементам ::before и ::after.
- Наследуется: нет.
- Анимируется: нет.
- JavaScript: object.style.transitionDelay="value".
Синтаксис
transition-delay: <время> [, <время>, ...]
Значения
В качестве значения свойство принимает время, указанное в секундах (s) или миллисекундах (ms). Если указано нулевое значение времени (используется браузером по умолчанию), то переход начинается без задержек. Также разрешается использовать отрицательные значения, но с ними нужно быть осторожным, т.к. это может привести к изменению вида перехода в начальной стадии процесса. Разрешается перечислять через запятую несколько значений промежутков времени для каждого из свойств, перечисленных в качестве значения в transition-property.
Ссылки
Официальный сайт W3C: https://drafts.csswg.org/css-transitions-1/#propdef-transition-delay
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/transition-delay
Примеры
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> <style> div{ margin-top: 2em; overflow: hidden; white-space: nowrap; padding: 1em; width: 200px; height: 50px; border: solid 4px red; cursor: pointer; } /* Задаем общие параметры перехода */ .tran{ transition-property: width, background-color; transition-timing-function: ease; transition-duration: 2s; } /* Задаем задержку перехода */ .tran_delay_1{ transition-delay: 0.01s; } .tran_delay_2{ transition-delay: 0.7s; } .tran_delay_3{ transition-delay: 1700ms; } div.tran:hover{ background-color: #0000ff; width: 400px; } </style> </head> <body> <div>Наведите курсор на блоки!</div> <div class="tran tran_delay_1">transition-delay: 0.01s</div> <div class="tran tran_delay_2">transition-delay: 0.7s</div> <div class="tran tran_delay_3">transition-delay: 1700ms</div> </body> </html>
Пример №1