transition-delay: задержка начала перехода
transition-delay определяет паузу перед началом перехода после изменения целевого состояния.
Назначение
transition-delay определяет паузу перед началом перехода после изменения целевого состояния.
Как это работает
Положительное время откладывает начало, ноль запускает сразу. Отрицательное значение позволяет начать так, будто часть перехода уже прошла. Задержка и длительность решают разные задачи.
Пример
<style>
.sample{padding:20px;background:#eaf4ee;transition:background-color .2s;transition-delay:.3s}.sample:hover{background:#c0dbc9}@media(prefers-reduced-motion:reduce){.sample{transition:none}}
</style>
<div class="sample">Изменение фона начинается после короткой паузы.</div>Что должно получиться
Переход фона начинается через .3 секунды и длится .2 секунды. Правило действует и при смене состояния обратно, если для него не задана отдельная задержка.
Граница применения и частая ошибка
Не откладывайте подтверждение важного действия так, что интерфейс кажется зависшим. Пользователь должен немедленно понимать, что ввод принят, даже если декоративный эффект начинается позже.
Самостоятельная проверка
Наведите указатель ненадолго и затем удерживайте дольше задержки. Сравните поведение с нулевой задержкой и проверьте мгновенное состояние при reduced-motion.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.