Generador CSS Cubic Bezier

Lo que realmente es una función de temporización cubic-bézier

En CSS, una función de temporización mapea el tiempo transcurrido (la entrada, de 0 al inicio de la animación a 1 al final) a un valor de progreso (la salida, también convencionalmente de 0 a 1 pero se le permite sobrepasar). La propiedad animada (opacity, translate, color, cualquier cosa que CSS pueda transicionar) interpola entre su valor de partida y su valor final al ritmo que la función de temporización describe. La temporización lineal significa que la propiedad se mueve a velocidad constante; las diversas funciones ease aceleran, desaceleran o ambas. cubic-bezier(x1, y1, x2, y2) es la forma general: una curva de Bézier de (0,0) a (1,1) con dos puntos de control libres P1 y P2 que especificas con cuatro números. El navegador muestrea puntos a lo largo de esa curva para determinar el progreso de la propiedad en cada fotograma de la animación. Los cuatro números definen dos puntos de control: P1 = (x1, y1) da forma al inicio de la curva (típicamente 0–1 en ambos ejes), P2 = (x2, y2) da forma al final. Los valores x deben permanecer en [0, 1] para que la curva sea una función monovaluada del tiempo; los valores y pueden exceder [0, 1] para producir efectos de sobrepaso y rebote (un y de 1.2 significa que la propiedad excede momentáneamente su valor de destino antes de asentarse).

Curvas de Bézier, linaje matemático

Las curvas llevan el nombre de Pierre Bézier, ingeniero francés en Renault que las usó en los años 1960 para diseñar las líneas suaves de los paneles de carrocería del Renault 16, publicadas en 1968 como parte del sistema CAD UNISURF de Renault. Las matemáticas habían sido desarrolladas independientemente unos años antes (1959) por Paul de Casteljau en Citroën, pero Citroën mantuvo el trabajo de de Casteljau como secreto comercial y la versión publicada de Bézier se convirtió en la referencia canónica. Ambos hombres convergieron hacia la misma familia de curvas polinómicas definidas por puntos de control, el algoritmo de de Casteljau para evaluar una curva de Bézier en un parámetro dado lleva el nombre del pionero no publicado. Las curvas de Bézier cúbicas se convirtieron en la primitiva universal de los gráficos vectoriales porque son baratas de evaluar (unas pocas multiplicaciones y sumas), trivialmente escalables (las matemáticas son invariantes bajo transformaciones afines) y localmente controlables (mover un punto de control solo cambia segmentos cercanos de la curva). Adobe PostScript (1984) y PDF, la especificación SVG (Recomendación W3C septiembre de 2001), y todo formato de fuente moderno usan curvas de Bézier cúbicas como bloque de construcción para letras, iconos e ilustraciones. CSS adoptó el mismo tipo de curva para la temporización de animaciones, tomando prestada la primitiva matemática estándar del mundo del diseño visual para el nuevo caso de uso de describir el movimiento.

La spec CSS Animation y las funciones de temporización

Las animaciones y transiciones CSS usan ambas la misma familia de funciones de temporización. La spec CSS Animations Level 1 fue publicada por primera vez como Working Draft público en marzo de 2009 (extraída de implementaciones anteriores con prefijo WebKit) y continúa siendo mantenida por el W3C CSS Working Group. El módulo CSS Easing Functions Level 1 formaliza la sintaxis de la función de temporización y actualmente es Candidate Recommendation. Cinco palabras clave nombradas son alias para cubic-beziers específicos: ease = cubic-bezier(0.25, 0.1, 0.25, 1): el predeterminado CSS para transiciones, con un inicio rápido y un final lento que se siente natural para la mayoría del movimiento UI. ease-in = cubic-bezier(0.42, 0, 1, 1): empieza lento, acelera hacia un final rápido. ease-out = cubic-bezier(0, 0, 0.58, 1): inicio rápido, desacelera hacia un final lento; este es generalmente el easing más usado para elementos UI entrando al viewport. ease-in-out = cubic-bezier(0.42, 0, 0.58, 1): curva en S simétrica, lenta en ambos extremos. linear = cubic-bezier(0, 0, 1, 1): sin easing, tasa constante; raramente la elección correcta para UI pero apropiada para animaciones de bucle continuo como spinners. CSS también ofrece dos opciones de temporización no-Bézier: steps(n, jumpterm) para animación escalonada (fotograma a fotograma), y linear() (añadido en CSS Easing Level 2) para funciones lineales por tramos que aproximan cualquier curva.

Curvas de easing de sistemas de diseño

Los grandes sistemas de diseño publican curvas de easing opinionadas que sobrescriben los predeterminados CSS. Google Material Design especifica «standard easing» como cubic-bezier(0.4, 0, 0.2, 1): aceleración rápida, desaceleración lenta, usado para la mayoría de las transiciones UI en Android y la biblioteca Material de la web; «decelerated easing» cubic-bezier(0, 0, 0.2, 1) para elementos entrando a la pantalla; «accelerated easing» cubic-bezier(0.4, 0, 1, 1) para elementos saliendo. Las Human Interface Guidelines de Apple enfatizan animaciones de física de muelle más que curvas de Bézier fijas, pero el UIKit de iOS envía un cubic-bezier predeterminado de aproximadamente (0.25, 0.1, 0.25, 1) (el mismo que ease CSS). El Carbon Design System de IBM usa cubic-bezier(0.5, 0, 0.1, 1) para su categoría de movimiento productivo. Microsoft Fluent, Atlassian, Salesforce Lightning todos especifican sus propias curvas. Las ecuaciones de easing de Robert Penner (publicadas en 2001 como parte de su libro sobre movimiento Flash) definieron el vocabulario de curvas nombradas que casi cualquier biblioteca de animación usa, easeInQuad, easeOutCubic, easeInOutSine, easeInQuart, easeOutBack, easeInOutBounce, easeInElastic. La mayoría se pueden expresar como cubic-beziers; las variantes elastic y bounce no pueden (requieren funciones por tramos multi-parte porque oscilan).

Elegir la curva correcta para el trabajo

• Elementos entrando al viewport (modales apareciendo, tarjetas deslizándose hacia adentro, dropdowns abriéndose), usa ease-out o una curva decelerada como la de Material cubic-bezier(0, 0, 0.2, 1). El elemento desacelera al llegar, lo que se siente como si «se asentara en su lugar».
• Elementos saliendo del viewport (modales cerrándose, tarjetas deslizándose hacia afuera), usa ease-in o una curva acelerada. El elemento acelera al irse, sintiéndose como si se marchara con intención.
• Animaciones continuas (cargadores, barras de progreso, movimiento ambiental), usa linear. El easing hace que el movimiento continuo se sienta entrecortado; la velocidad constante se lee como estable.
• Estados de hover y pulsaciones de botón: duración corta (100-150ms) con ease-out para el hover-in y ease-in o sin easing para el hover-out. El feedback de los botones debe sentirse ágil.
• Movimiento enfático que necesita personalidad (notificaciones toast, indicadores de éxito), usa una curva ligeramente sobrepasante como cubic-bezier(0.34, 1.56, 0.64, 1) para un rebote sutil que señala «acaba de pasar algo interesante» sin ser molesto.
• Animaciones más largas (sobre 500ms): usa ease-in-out o una curva en S similar. Las animaciones largas con easing unilateral parecen tener un inicio o final mal formado.

Consideraciones de rendimiento

Las funciones de temporización cubic-bezier personalizadas no cuestan esencialmente nada en tiempo de ejecución, la curva es una constante, los navegadores precalculan la tabla de búsqueda una vez, y la evaluación por fotograma son unas pocas operaciones de coma flotante. La pregunta de rendimiento es qué propiedad animas, no la curva de temporización. Animar transform (translate, scale, rotate) y opacity usa composición GPU y permanece fluido a 60 o 120fps incluso en hardware de gama media. Animar top, left, width, height, margin, padding, o cualquier propiedad que dispare layout, se entrecortará en cualquier cosa salvo las páginas más simples porque cada fotograma dispara un reflow completo. La lista de propiedades «compositor-friendly» (transform + opacity, más filter y unas pocas otras) es el conjunto seguro habitual; todo lo demás necesita ser probado bajo la carga real de la página. La propiedad CSS will-change sugiere al navegador que una propiedad va a animarse, permitiéndole pre-promover el elemento a su propia capa de composición; usa con moderación porque cada will-change reserva memoria GPU.

Accesibilidad: prefers-reduced-motion

Una minoría significativa de usuarios (aquellos con trastornos vestibulares, condiciones de déficit de atención, o simple preferencia personal) encuentran el diseño de movimiento distractor o activamente incómodo. La spec CSS Media Queries Level 5 define la media feature prefers-reduced-motion, expuesta como ajuste del sistema en macOS (Ajustes del Sistema → Accesibilidad → Pantalla → Reducir movimiento), Windows 10+ (Configuración → Accesibilidad → Pantalla), iOS, Android y la mayoría de los principales escritorios Linux. La convención desde alrededor de 2019: envolver cualquier animación no esencial en @media (prefers-reduced-motion: no-preference) { ... } o invertir con @media (prefers-reduced-motion: reduce) { transition: none !important; animation: none !important; }. La elección de curva cubic-bezier no importa para esto, la spec pide al desarrollador que desactive o acorte sustancialmente la animación cuando el usuario ha expresado la preferencia. La documentación moderna de los sistemas de diseño (Material, Atlassian, GOV.UK) incluye toda guía de movimiento reducido.

Física de muelle, la alternativa más nueva

Las funciones de temporización cubic-bezier describen el movimiento como una interpolación de duración fija a lo largo de una curva ajustada a mano. La física de muelle describe el movimiento como el asentamiento natural de un oscilador armónico amortiguado: especificas masa, rigidez y amortiguación, y la animación corre hasta que el muelle está en reposo. Los muelles se sienten más naturales para gestos UI interrumpibles porque tienen impulso que continúa a través de las interrupciones, al soltar un gesto de flick a media trayectoria, el muelle continúa hacia su destino en una nueva curva en lugar de chasquear. iOS de Apple usa física de muelle para la mayoría de las interacciones nativas (el rebote de una scroll view en el borde, el efecto de banda elástica de un swipe). React Spring (Paul Henschel), Framer Motion, y la función de easing CSS linear() (cuando se le da una curva de muelle muestreada) traen la semántica de muelle a la web. Los cubic-beziers siguen siendo la herramienta correcta para transiciones UI de duración fija; los muelles son la herramienta correcta para movimiento dirigido por gesto, interrumpible. Este editor produce cubic-beziers, la forma correcta para el 90% del trabajo de animación UI en 2026.

Cuándo recurrirás a esta herramienta

• Diseñar una animación nueva al feeling. Arrastra los puntos de control hasta que la bola de previsualización se mueva como quieres, luego copia el CSS. Más rápido que escribir cuatro números y refrescar la página.
• Igualar una animación de otro producto. Haz ingeniería inversa de la temporización de una animación que has visto en otro lugar ajustando hasta que la previsualización coincida con tu memoria.
• Construir una biblioteca de movimiento de marca. Decídete por tres o cuatro cubic-beziers específicos para «rápido», «suave», «enfático», «rebote» y aplícalos consistentemente a través del producto.
• Revisar la spec de animación de un diseñador. Pega los valores cubic-bezier de una spec de movimiento de Figma, ve si la curva produce el movimiento que el diseñador describió.
• Handoff ingeniero-diseñador. Un diseñador saca la curva correcta en esta herramienta, copia el CSS, y lo pega en un mensaje de Slack, señal mucho mayor que un vago «hazlo más rebotador».

Preguntas frecuentes

¿Qué representan los valores?

Definen los dos puntos de control de una curva de Bézier cúbica de (0,0) a (1,1). P1 = (x1, y1) da forma al inicio de la curva; P2 = (x2, y2) da forma al final. El eje x es el tiempo (debe estar en [0, 1]); el eje y es el progreso de la animación (puede exceder [0, 1] para efectos de sobrepaso). y > 1 significa que la propiedad excede momentáneamente su valor de destino antes de asentarse; y < 0 significa que la propiedad se mueve brevemente en la dirección equivocada antes de aproximarse al objetivo.

¿Cuál es el easing CSS por defecto?

Para transiciones CSS (transition: opacity 300ms;) el predeterminado es ease, equivalente a cubic-bezier(0.25, 0.1, 0.25, 1): inicio rápido, final lento. Para animaciones CSS (animation: foo 1s;) el predeterminado es también ease. Sobrescribe con transition-timing-function o animation-timing-function. Para la mayoría del movimiento UI, la variante ease-out o una curva decelerada estilo Material produce resultados con mejor sensación que el predeterminado.

¿Cómo hago un efecto rebotador o de sobrepaso?

Empuja y2 por encima de 1 (valores típicos 1.2–1.6) para que la curva exceda brevemente el destino antes de asentarse. Un rebote sutil común es cubic-bezier(0.34, 1.56, 0.64, 1). Para rebotes pronunciados querrás física de muelle o animación multi-keyframe en lugar de un solo cubic-bezier, las curvas de Bézier solo pueden tener un pico, así que el rebote verdadero (oscilaciones múltiples) requiere keyframes en pasos intermedios.

¿Son las curvas personalizadas más lentas que las palabras clave nombradas?

No, las palabras clave nombradas son alias para cubic-beziers específicos, evaluados por el mismo camino de código. El rendimiento depende de qué propiedad animas (transform/opacity = compuesto GPU y rápido; propiedades que afectan layout como top/left/width = lentas por reflow), no de la curva de temporización. El coste de evaluación cubic-bezier es despreciable.

¿Funciona esta herramienta sin conexión?

Sí, el canvas de la curva, la animación de la bola de previsualización y la generación de código CSS todos se ejecutan enteramente en tu navegador vía JavaScript. Sin llamadas de red durante el uso. Pon la página sin conexión (modo avión) tras cargarla y el editor sigue funcionando. Sin telemetría; los valores de curva en los que te asentaste nunca salen de tu dispositivo.

Herramientas relacionadas