En este artículo
Que son las curvas de Bezier cubicas?
Una curva de Bezier cubica es una funcion matematica utilizada en CSS para definir el tiempo de las animaciones y transiciones. Escrita como cubic-bezier(x1, y1, x2, y2), describe como una animacion progresa de principio a fin mapeando el tiempo al progreso a lo largo de una curva suave definida por cuatro puntos de control.
En CSS, la funcion cubic-bezier() controla el easing de las propiedades transition-timing-function y animation-timing-function. En lugar de movimiento lineal, te permite crear aceleraciones y desaceleraciones naturales que imitan la fisica del mundo real, haciendo que las animaciones de la interfaz se sientan pulidas e intencionales.
Comprender los cuatro valores de control
La funcion cubic-bezier() toma cuatro valores que definen dos puntos de control en la curva. Estos puntos de control dan forma a como la animacion acelera y desacelera.
- X1 (0-1) — la posicion horizontal del primer punto de control, que determina cuando termina la fase de aceleracion inicial
- Y1 (cualquier valor) — la posicion vertical del primer punto de control, que controla la velocidad de inicio de la animacion. Los valores superiores a 1 crean un efecto de sobreimpulso
- X2 (0-1) — la posicion horizontal del segundo punto de control, que determina cuando comienza la fase de desaceleracion
- Y2 (cualquier valor) — la posicion vertical del segundo punto de control, que controla como termina la animacion. Los valores superiores a 1 crean un rebote de sobreimpulso
Pruébalo gratis — sin registro
Crear una curva de Bezier cubica →Presets de easing comunes y cuando usarlos
CSS proporciona varias palabras clave de easing incorporadas que corresponden a valores cubic-bezier especificos. Comprender estos presets te ayuda a elegir la sensacion adecuada para tus animaciones.
- ease (0.25, 0.1, 0.25, 1.0) — el predeterminado de CSS, inicia rapidamente y luego desacelera suavemente. Bueno para la mayoria de las transiciones generales
- ease-in (0.42, 0, 1.0, 1.0) — inicia lentamente y acelera. Mejor para elementos que salen de la pantalla o se desvanecen
- ease-out (0, 0, 0.58, 1.0) — inicia rapido y desacelera. Ideal para elementos que entran en la pantalla o aparecen
- ease-in-out (0.42, 0, 0.58, 1.0) — inicio y final lentos con medio rapido. Adecuado para animaciones en bucle o elementos que permanecen en pantalla
- linear (0, 0, 1, 1) — velocidad constante de principio a fin. Usar para barras de progreso, indicadores de carga o transiciones de color donde la velocidad uniforme se siente natural
Preguntas frecuentes
Todos los navegadores soportan cubic-bezier()?
Si. La funcion cubic-bezier() ha sido soportada en todos los navegadores principales desde IE 10 (2012). Es parte de las especificaciones CSS Transitions y CSS Animations, que tienen soporte completo en Chrome, Firefox, Safari, Edge y todos los navegadores moviles modernos.
Se pueden crear animaciones de rebote con cubic-bezier()?
Las curvas de Bezier cubicas pueden aproximar efectos de rebote simples usando valores Y mayores que 1 (sobreimpulso). Por ejemplo, cubic-bezier(0.34, 1.56, 0.64, 1) crea un ligero sobreimpulso. Sin embargo, la verdadera fisica de resorte con multiples rebotes requiere CSS spring() (aun no ampliamente soportado) o bibliotecas de animacion JavaScript como GSAP o Framer Motion.
Cual es la diferencia entre transiciones CSS y animaciones CSS?
Las transiciones CSS animan entre dos estados cuando una propiedad cambia (por ejemplo, al pasar el raton). Las animaciones CSS usan keyframes para definir secuencias de multiples pasos que pueden repetirse y ejecutarse de forma independiente. Ambas usan las mismas funciones de temporizado, incluyendo cubic-bezier(), para controlar el easing entre estados o keyframes.