Transiciones y Animaciones
Utilidades para controlar la duración de las transiciones CSS.
| Clase | Estilos |
|---|---|
duration-<number> | transition-duration: <number>ms; |
duration-initial | transition-duration: initial; |
duration-(<custom-property>) | transition-duration: var(<custom-property>); |
duration-[<value>] | transition-duration: <value>; |
Usa utilidades como duration-150 y duration-700 para establecer la duración de la transición de un elemento en milisegundos:
Pasa el cursor sobre cada botón para ver el comportamiento esperado
duration-150
duration-300
duration-700
<button class="transition duration-150 ease-in-out ...">Botón A</button><button class="transition duration-300 ease-in-out ...">Botón B</button><button class="transition duration-700 ease-in-out ...">Botón C</button>Para situaciones en las que el usuario ha especificado que prefiere un movimiento reducido, puedes aplicar de forma condicional animaciones y transiciones usando las variantes motion-safe y motion-reduce:
<button type="button" class="duration-300 motion-reduce:duration-0 ..."> <!-- ... --></button>Usa la sintaxis duration-[<value>] para establecer el/la transition duration basándose en un valor completamente personalizado:
<button class="duration-[1s,15s] ..."> <!-- ... --></button>Para variables CSS, también puedes usar la sintaxis duration-(<custom-property>) :
<button class="duration-(--my-duration) ..."> <!-- ... --></button>Esto es solo un atajo para duration-[var(<custom-property>)] que añade la función var() por ti automáticamente.
Antepone a la utilidad transition-duration el prefijo de una variante de punto de ruptura como md: para aplicar la utilidad únicamente en tamaños de pantalla mediano y superiores:
<button class="duration-0 md:duration-150 ..."> <!-- ... --></button>Obtén más información sobre el uso de variantes en la documentación de variantes.