Curvas de aceleración CSS

Preguntas frecuentes

¿Dónde pongo estos valores?

En la propiedad transition-timing-function o animation-timing-function, o como tercer valor de la propiedad abreviada transition, por ejemplo transition: transform .3s cubic-bezier(0.33, 1, 0.68, 1). Los valores con palabras clave (ease, ease-in y similares) están integrados en todos los navegadores; los valores cubic-bezier() funcionan en cualquier navegador compatible con cubic-bezier, es decir, en todos los navegadores modernos.

¿Cómo interpreto la muestra?

El eje horizontal representa el tiempo de principio a fin; el vertical, cuánto ha cambiado el valor animado. Una curva que empieza con poca pendiente y termina con mucha (ease-in) comienza despacio y acelera; la forma opuesta (ease-out) empieza rápido y se frena al llegar. Las dos líneas horizontales tenues marcan 0 y 1, así que las curvas back las cruzan visiblemente cuando sobrepasan esos límites.

¿Cuándo conviene usar una curva out o una curva in?

En las interfaces, las variantes ease-out suelen ser la opción habitual: la interfaz parece responder mejor cuando el movimiento empieza rápido y se frena al llegar a su sitio. Usa las variantes ease-in principalmente para elementos que salen de la pantalla, y las variantes in-out para movimientos que empiezan y terminan en ella, como cambiar una tarjeta de posición.

¿Qué pasa con los valores negativos de las curvas back?

Los puntos de control fuera del intervalo de 0 a 1 hacen que el valor animado sobrepase su inicio o su final antes de estabilizarse, lo que se percibe como un pequeño rebote. Funciona bien con transformaciones como translate y scale, pero evítalo en propiedades con límites fijos, como opacity, donde el exceso simplemente se recorta.