transition-timing-function

Utilidades para controlar la curva de aceleración de las transiciones CSS.

Clase Estilos

Clase	Estilos
`ease-linear`	`transition-timing-function: linear;`
`ease-in`	`transition-timing-function: var(--ease-in); /* cubic-bezier(0.4, 0, 1, 1) */`
`ease-out`	`transition-timing-function: var(--ease-out); /* cubic-bezier(0, 0, 0.2, 1) */`
`ease-in-out`	`transition-timing-function: var(--ease-in-out); /* cubic-bezier(0.4, 0, 0.2, 1) */`
`ease-initial`	`transition-timing-function: initial;`
`ease-(<custom-property>)`	`transition-timing-function: var(<custom-property>);`
`ease-[<value>]`	`transition-timing-function: <value>;`

ease-linear

transition-timing-function: linear;

ease-in

transition-timing-function: var(--ease-in); /* cubic-bezier(0.4, 0, 1, 1) */

ease-out

transition-timing-function: var(--ease-out); /* cubic-bezier(0, 0, 0.2, 1) */

ease-in-out

transition-timing-function: var(--ease-in-out); /* cubic-bezier(0.4, 0, 0.2, 1) */

ease-initial

transition-timing-function: initial;

ease-(<custom-property>)

transition-timing-function: var(<custom-property>);

ease-[<value>]

transition-timing-function: <value>;

Ejemplos

Ejemplo básico

Usa utilidades como ease-in y ease-out para controlar la curva de aceleración de la transición de un elemento:

Pasa el cursor sobre cada botón para ver el comportamiento esperado

ease-in

ease-out

ease-in-out

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

Usando un valor personalizado

Usa la sintaxis ease-[<value>] para establecer el transition timing function basado en un valor completamente personalizado:

<button class="ease-[cubic-bezier(0.95,0.05,0.795,0.035)] ...">
  <!-- ... -->
</button>

Para variables CSS, también puedes usar la sintaxis ease-(<custom-property>) :

<button class="ease-(--my-ease) ...">
  <!-- ... -->
</button>

Esto es solo un atajo para ease-[var(<custom-property>)] que agrega la función var() por ti automáticamente.

Responsive Design

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

<button class="ease-out md:ease-in ...">
  <!-- ... -->
</button>

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

Personalizando tu tema

Usa las variables de tema --ease-* para personalizar las utilidades transition timing function en tu proyecto:

@theme {
  --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035); 
}

Ahora la utilidad ease-in-expo puede ser usada en tu marcado:

<button class="ease-in-expo">
  <!-- ... -->
</button>

Aprende más sobre la personalización de tu tema en la documentación del tema.