Generador de CSS Easing / cubic-bezier

cubic-bezier(x1, y1, x2, y2) define una curva de Bezier cúbica usada como función de temporización CSS para transiciones y animaciones. La curva se define por 4 puntos: P0=(0,0) inicio, P1=(x1,y1) punto de control 1, P2=(x2,y2) punto de control 2, P3=(1,1) fin. x1, x2 deben estar en [0,1] (eje temporal). y1, y2 pueden estar fuera de [0,1] para efectos de sobreimpulso. Las palabras clave CSS se mapean a curvas específicas: ease = (0.25, 0.1, 0.25, 1.0), ease-in = (0.42, 0, 1.0, 1.0), ease-out = (0, 0, 0.58, 1.0), ease-in-out = (0.42, 0, 0.58, 1.0), linear = (0, 0, 1, 1).

ease-in: inicio lento, final rápido — como un objeto que parte del reposo (gravedad). ease-out: inicio rápido, final lento — como una pelota que aterriza en una superficie. ease-in-out: inicio lento, medio rápido, final lento — curva S simétrica. linear: velocidad constante. ease: el valor predeterminado de CSS — ligeramente ease-in, luego ease-out. Reglas generales: use ease-out para elementos que entran a la pantalla (se siente natural). Use ease-in para elementos que salen (acelerando fuera de la pantalla). Use ease-in-out para transiciones de estado.

Cubic-bezier: duración fija, temporización independiente de la física. La animación siempre toma exactamente la duración especificada. Resorte: basado en física con masa, rigidez, amortiguación y velocidad. La duración no es fija — se ejecuta hasta que el sistema se estabiliza. Los resortes pueden sobrepasar y oscilar de forma natural. CSS no admite resortes de forma nativa — requieren JavaScript (Framer Motion, React Spring, GSAP). Para CSS puro, cubic-bezier con valores y fuera de [0,1] aproxima el sobreimpulso de resorte. Ejemplo: cubic-bezier(0.34, 1.56, 0.64, 1) crea un leve sobreimpulso similar a un resorte.

Principios: los objetos en el mundo real no comienzan ni se detienen instantáneamente. Siga las interacciones materiales: los elementos que entran a la pantalla deben tener ease-out (desaceleran al llegar). Los elementos que salen deben tener ease-in (aceleran al marcharse). Los cambios de estado (expandir, contraer) usan ease-in-out. Las microinteracciones (pulsación de botón) usan ease-out para la respuesta, ease-in para el restablecimiento. Material Design usa: curva estándar (0.4, 0, 0.2, 1), desaceleración (0, 0, 0.2, 1), aceleración (0.4, 0, 1, 1).

CSS linear() (2023) permite la interpolación lineal de múltiples paradas — esencialmente una función lineal por tramos que aproxima curvas complejas. Sintaxis: animation-timing-function: linear(0, 0.25, 1). Una aceleración de rebote: linear(0, 0.063, 0.25 18.2%, 1 36.4%, 0.813 54.5%, 1 72.7%, 0.941 81.8%, 1). Así es como se obtienen animaciones de resorte, rebote y física compleja sin JavaScript. Compatibilidad con navegadores: Chrome 113+, Firefox 112+, Safari 17.2+.