¿Qué es cubic-bezier y por qué "ease" no basta?
Cada animación CSS tiene una función de timing (la curva de aceleración). `ease`, `linear`, `ease-in-out` son presets, pero en UI moderna las animaciones deben sentirse naturales (como en el mundo real): el elemento acelera, decelera, a veces se pasa un poco.
cubic-bezier(x1, y1, x2, y2) te da control completo sobre la curva. Le das 4 números y la animación se comporta exactamente como quieras: arranque lento con final contundente, lo contrario, o un pequeño "back" (sobrepasar y volver, como una goma elástica).
Aquí obtienes un gráfico interactivo. Arrastra dos puntos de control coloreados para reformar la curva. Debajo, una bola animada muestra tu curva en movimiento. Valores Y fuera de 0-1 crean efectos bounce / back.
Cómo usar
- Elige un preset de la columna derecha (linear, ease-in, ease-out, bounce, back). Cada uno es una curva clásica.
- Arrastra el punto azul o violeta del gráfico para reformar la curva.
- Debajo, mira la bola animada usando tu curva. Botón replay si terminó.
- El slider duración (100-3000ms) muestra cómo se siente la curva a distintas velocidades.
- Copia la llamada cubic-bezier(...) y pega en `transition-timing-function` o `animation-timing-function`.
Cuándo ayuda
Una curva Bezier es la diferencia entre UI barata y premium. Ejemplo: hover de tarjeta con `transition: transform 200ms linear` vs `200ms cubic-bezier(0.4, 0, 0.2, 1)` (Material standard easing). Día y noche:
- Modal aparece suavemente con `ease-out-cubic`. Arranque rápido, aterrizaje suave = movimiento natural.
- Tarjeta vuelve tras hover con `ease-in-cubic`. Arranque lento, final rápido = como gravedad.
- Reveal con rebote con `ease-out-back` (y2 sobre 1). Elemento desliza, se pasa ligeramente, se asienta. Atención sin molestar.
- Spring estilo iOS es un back/elastic más fuerte. A menudo más fácil en Framer Motion (física spring vs bezier).
- Material Design usa `cubic-bezier(0.4, 0, 0.2, 1)` (standard ease) para la mayoría de componentes. Apple HIG tiene los suyos, valores similares.
- Scroll suave (p. ej. enlaces ancla): `ease-in-out` da una transición deliberada, perceptible sin ser lenta.
Tras escoger una curva, úsala en `transition`, `animation` (con @keyframes) y Framer Motion (`ease: [0.4, 0, 0.2, 1]`). Para editar animaciones @keyframes mira el generador de animaciones CSS.