transition timing function
Redactado por
Sebastian V. Fecha de publicación
25/03/2024
Tiempo de lectura
6 min
Tema
CSS Transitions
La personalidad del movimiento
Dos elementos pueden moverse de A hacia B en exactamente 1 segundo, pero pueden sentirse completamente distintos. Uno puede sentirse como un robot, y el otro como un objeto real impulsado por la física. Esa diferencia es el easing o transition-timing-function.
Los valores principales (Curvas de Bézier)
El navegador calcula la velocidad de la transición usando matemáticas (Curvas de Bézier cúbicas). Tienes a tu disposición palabras clave predefinidas:
- ✦ linear: Velocidad constante. Sin aceleración ni frenado. Se siente mecánico, ideal para barras de progreso continuas.
- ✦ ease (por defecto): Comienza lento, acelera rápido, y frena lentamente al final. Es muy orgánico y funciona bien en casi todo.
- ✦ ease-in: Comienza lento y termina rápido. Es como dejar caer un objeto por la gravedad.
- ✦ ease-out: Comienza rápido y desacelera hasta detenerse. Es perfecto para la UI porque el elemento responde inmediatamente a la interacción del usuario y luego "frena" suavemente.
- ✦ cubic-bezier(n,n,n,n): Crea tu propia curva matemática. ¡Incluso puedes hacer que los elementos reboten sobrepasando su destino final!
Consejo profesional
Regla de oro de UX: Cuando un elemento entra en pantalla o responde al hover, usa ease-out (responde rápido, frena suave). Cuando sale, usa ease-in (empieza lento y escapa rápido).
Ejemplo práctico
<div class="race">
<div class="box linear">linear</div>
<div class="box ease">ease</div>
<div class="box ease-in">ease-in</div>
<div class="box ease-out">ease-out</div>
<div class="box bouncy">cubic-bezier</div>
</div>Pasa el cursor por el contenedor. ¡Todos llegan al mismo tiempo exacto (1s), pero mira cómo el viaje es totalmente diferente!
Errores comunes
Practica lo aprendido
Controla la curva de velocidad para crear interacciones orgánicas y naturales.