Transiciones y Animación
Utilidades para controlar el retraso de las transiciones CSS.
| Clase | Estilos |
|---|---|
delay-<number> | transition-delay: <number>ms; |
delay-(<custom-property>) | transition-delay: var(<custom-property>); |
delay-[<value>] | transition-delay: <value>; |
Usa utilidades como delay-150 y delay-700 para establecer el retraso de transición de un elemento en milisegundos:
Pasa el cursor sobre cada botón para ver el comportamiento esperado
delay-150
delay-300
delay-700
<button class="transition delay-150 duration-300 ease-in-out ...">Button A</button><button class="transition delay-300 duration-300 ease-in-out ...">Button B</button><button class="transition delay-700 duration-300 ease-in-out ...">Button C</button>Usa la sintaxis delay-[<value>] para establecer el transition delay basado en un valor completamente personalizado:
<button class="delay-[1s,250ms] ..."> <!-- ... --></button>Para variables CSS, también puedes usar la sintaxis delay-(<custom-property>) :
<button class="delay-(--my-delay) ..."> <!-- ... --></button>Esto es solo un atajo para delay-[var(<custom-property>)] que agrega la función var() por ti automáticamente.
Prefija una utilidad transition-delay con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:
<button class="delay-150 md:delay-300 ..."> <!-- ... --></button>Aprende más sobre el uso de variantes en la documentación de variantes.