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 ...">Botón A</button><button class="duration-300 ease-out ...">Botón B</button><button class="duration-300 ease-in-out ...">Botón C</button>

Usar un valor personalizado

Usa la sintaxis ease-[<value>] para establecer el/la transition timing function basándose 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 añade la función var() por ti automáticamente.

Diseño responsivo

Antepone a la utilidad transition-timing-function 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="ease-out md:ease-in ...">  <!-- ... --></button>

Obtén más información sobre el uso de variantes en la documentación de variantes.

Personalizar el tema

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

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

Ahora se puede usar la utilidad ease-in-expo en tu marcado:

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

Obtén más información sobre cómo personalizar tu tema en la documentación del tema.