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