Usa el Generador de Curvas Cubic-Bezier gratuito abajo: tus datos nunca salen de tu navegador, todo el trabajo ocurre en tu dispositivo y no se sube a ningun servidor.
Que es una curva de easing
Cuando un elemento se mueve de un estado a otro, la forma en que acelera y desacelera se llama easing, y cambia como se siente el movimiento mas que la duracion. Un movimiento lineal, a velocidad constante, se siente mecanico y barato. Un movimiento que empieza rapido y se detiene suave se siente natural, porque los objetos reales se comportan asi: aceleran, y luego la friccion y la resistencia los detienen con suavidad. La funcion cubic-bezier es como CSS describe esa curva de aceleracion.
Una curva bezier cubica se define con cuatro numeros: dos puntos de control, cada uno con un valor x y un valor y, entre puntos fijos de inicio y fin. Los valores x deben quedarse entre 0 y 1, porque representan el progreso del tiempo. Los valores y pueden salir de ese rango, lo que crea efectos de anticipacion, donde el elemento primero se mueve un poco hacia atras, y efectos de sobrepaso, donde pasa su objetivo y vuelve a su sitio.
Como usar la herramienta
Pon los cuatro numeros, o elige un preajuste, y el lienzo dibuja la curva con sus puntos de control y lineas guia. Pulsa Reproducir para ver una caja animarse siguiendo la curva, asi que puedes sentir el easing en vez de imaginarlo desde los numeros. Cuando el movimiento se sienta bien, copia la linea transition-timing-function en tu hoja de estilos.
Empieza desde los preajustes y ajusta. Ease es el valor por defecto para la mayoria de movimientos de interfaz: empieza rapido y termina suave, lo que sirve para estados hover y aperturas de paneles. Ease-out empieza rapido y desacelera, lo que sirve para elementos que entran en pantalla, porque llegan rapido y se asientan suave. Ease-in empieza lento y acelera, lo que sirve para elementos que salen, porque ganan velocidad al marcharse.
Leer la curva
La forma de la curva cuenta la historia. Una seccion empinada significa movimiento rapido durante esa parte del tiempo; una seccion plana significa movimiento lento. Una curva que se pega abajo al principio y sube tarde significa inicio lento y final rapido: ease-in. Una curva que sube pronto y se aplana tarde significa inicio rapido y final lento: ease-out. Una forma de S simetrica significa lento en ambos extremos y rapido en el medio: ease-in-out.
Los puntos de control dan forma a la curva como las asas dan forma a un trazado en una herramienta de dibujo. El primer punto de control influye en la parte inicial del movimiento, el segundo en la parte final. Subir el valor y del primer punto hace el inicio mas rapido; bajar el valor y del segundo punto hace el final mas lento. El lienzo muestra las asas y sus lineas guia para que conectes cada numero con la forma que produce.
Sobrepaso y anticipacion
Los valores y fuera de 0 a 1 crean el movimiento mas expresivo. Un valor y por encima de 1 en el segundo punto de control hace que el elemento sobrepase su objetivo y luego vuelva: la sensacion clasica de muelle sin rebote usada para interfaces juguetonas como el preajuste easeOutBack. Un valor y por debajo de 0 en el primer punto de control hace que el elemento retroceda un poco antes de avanzar, un efecto de anticipacion tomado de la animacion, donde un personaje se agacha antes de saltar.
Estos efectos son potentes y faciles de exagerar. El sobrepaso sirve para momentos pequenos y agradables: pulsar un boton, aparecer una insignia, entrar una tarjeta. No sirve para cambios grandes de diseno, donde el sobrepaso parece un fallo, ni para movimiento frecuente, donde se vuelve molesto. Usa easing expresivo con moderacion, en momentos que quieras que los usuarios noten, y manten el resto tranquilo.
Duracion y easing juntos
El easing y la duracion trabajan en pareja, y ninguno solo decide como se siente el movimiento. Un hover de 150 milisegundos con ease-out se siente instantaneo y con respuesta. La misma curva a 600 milisegundos se siente deliberada y suave. Un ease-in de 150 milisegundos se siente perezoso, porque el inicio lento se come la mayor parte de la corta duracion antes de que algo se mueva de forma visible.
Accesibilidad y movimiento
No todo el mundo vive el movimiento igual. Algunos usuarios tienen trastornos vestibulares que hacen la animacion realmente incomoda, y los navegadores exponen esa preferencia mediante la media query prefers-reduced-motion. Respetala: envuelve tus transiciones en una comprobacion que desactive o acorte el movimiento para usuarios que lo pidan. Un sitio que anima con respeto mantiene su pulido para la mayoria sin perjudicar al resto.
Errores comunes
El error mas comun es usar ease-in para entradas. Los elementos que aparecen con ease-in parecen dudar, porque el inicio lento retrasa el movimiento visible. Las entradas quieren ease-out. Las salidas quieren ease-in. Otro error es copiar una curva de sobrepaso dramatica de una demo a una interfaz en produccion, donde distrae del contenido en vez de deleitar.
Herramientas relacionadas
- CSS Cubic Bezier Generator (English version)
- Calculadora de Especificidad CSS
- Convertidor de HTML a JSX