transition-duration

Ejemplos

Ejemplo básico

Usa utilidades como duration-150 y duration-700 para establecer la duración de la transición de un elemento en milisegundos:

<button class="transition duration-150 ease-in-out ...">Button A</button>
<button class="transition duration-300 ease-in-out ...">Button B</button>
<button class="transition duration-700 ease-in-out ...">Button C</button>

Usando un valor personalizado

Usa la sintaxis duration-[<value>] para establecer el transition duration basado 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 agrega la función var() por ti automáticamente.

Responsive Design

Prefija una utilidad transition-duration con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:

<button class="duration-0 md:duration-150 ...">
  <!-- ... -->
</button>

Aprende más sobre el uso de variantes en la documentación de variantes.