Переходы и анимация
Утилиты для управления задержкой CSS-переходов.
| Class | Styles |
|---|---|
delay-<number> | transition-delay: <number>ms; |
delay-(<custom-property>) | transition-delay: var(<custom-property>); |
delay-[<value>] | transition-delay: <value>; |
Используйте утилиты типа delay-150 и delay-700, чтобы установить задержку перехода элемента в миллисекундах:
Наведите курсор на каждую кнопку, чтобы увидеть ожидаемое поведение
delay-150
delay-300
delay-700
<button class="transition delay-150 duration-300 ease-in-out ...">Кнопка A</button><button class="transition delay-300 duration-300 ease-in-out ...">Кнопка B</button><button class="transition delay-700 duration-300 ease-in-out ...">Кнопка C</button>Используйте синтаксис delay-[<value>] , чтобы задать transition delay на основе полностью пользовательского значения:
<button class="delay-[1s,250ms] ..."> <!-- ... --></button>Для переменных CSS вы также можете использовать синтаксис: delay-(<custom-property>)
<button class="delay-(--my-delay) ..."> <!-- ... --></button>Это просто сокращение, delay-[var(<custom-property>)] которое автоматически добавляет функцию var().
Префикс a transition-delay утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:
<button class="delay-150 md:delay-300 ..."> <!-- ... --></button>Подробнее об использовании вариантов читайте в документации по вариантам.