Generador de Cubic Bezier CSS

Funcionamiento de las curvas de transición en CSS

Las transiciones y animaciones en CSS utilizan funciones de tiempo para determinar cómo progresa un cambio de estado a lo largo de una duración determinada. Por defecto, el navegador ofrece palabras clave como ease, ease-in, ease-out y ease-in-out. Sin embargo, para lograr un control preciso sobre el ritmo del movimiento, se emplea la función cubic-bezier(x1, y1, x2, y2).

Esta herramienta permite diseñar visualmente dicha curva de aceleración o easing. Al arrastrar los dos tiradores de control, se modifica la trayectoria que define la velocidad de la animación. Para facilitar la comprensión del movimiento resultante, un punto se desplaza a lo largo de la curva diseñada (etiquetada como tu curva), lo que permite comparar su ritmo en tiempo real con el de un punto testigo que se mueve a una velocidad constante y lineal. Una vez obtenido el comportamiento deseado, el generador calcula el valor exacto de la función para que pueda ser copiado directamente en las hojas de estilo.

El papel de los puntos de control (x1, y1, x2, y2)

La curva de Bezier cúbica se define mediante cuatro puntos en un plano bidimensional. El primer punto (el inicio de la animación) está fijado en la coordenada (0, 0), correspondiente a la esquina inferior izquierda. El cuarto punto (el final de la animación) se sitúa de forma fija en (1, 1), en la esquina superior derecha. El tiempo transcurre de izquierda a derecha en el eje horizontal (de 0 a 1), mientras que el progreso de la animación se desarrolla de abajo hacia arriba en el eje vertical.

Los dos tiradores móviles de la interfaz corresponden a los puntos de control intermedios, cuyas coordenadas determinan la curvatura y la tensión de la trayectoria:

• Primer punto de control (definido por las coordenadas x1, y1).
• Segundo punto de control (definido por las coordenadas x2, y2).

La alteración de estos valores modifica la aceleración. Por ejemplo, si la curva se eleva rápidamente al principio, la animación se iniciará de forma veloz; si se aplana en el tramo final, el movimiento se ralentizará antes de completarse.

Reglas de validación y límites de los parámetros

Para garantizar que la función generada sea válida en CSS, el editor aplica restricciones matemáticas estrictas a los campos de entrada de los puntos de control:

• Límites del eje X (Tiempo): Los valores de x1 y x2 deben mantenerse estrictamente en el rango de 0 a 1. El tiempo no puede retroceder ni superar el límite de finalización de la animación. Si se introduce un valor fuera de este rango, como por ejemplo 9 en el campo del primer punto de control X, al perder el foco del cursor el sistema corregirá automáticamente el valor al límite superior de 1.
• Límites del eje Y (Progreso): Los valores de y1 e y2 admiten un rango más amplio, concretamente entre -0.70 y 1.70. Esto permite que la curva sobresalga por encima del punto de destino o por debajo del punto de partida, posibilitando efectos físicos de anticipación y rebote.
• Gestión de errores en la interfaz: Si se vacía un campo numérico o se introduce un carácter no válido y se retira el foco del elemento, la herramienta restaura de forma automática el último valor válido registrado. Los campos vacíos o con datos no numéricos detienen la actualización de la curva hasta que se complete un valor correcto.
• Control por teclado: Es posible ajustar con precisión la posición de los tiradores utilizando el teclado. Al pulsar la tecla de dirección izquierda mientras un punto de control está seleccionado, su valor se reducirá de manera incremental, por ejemplo, a 0.99.

Efectos de anticipación y desbordamiento (overshoot)

Una de las ventajas de poder configurar los valores de Y fuera del intervalo estándar de 0 a 1 es la creación de efectos dinámicos avanzados:

• Anticipación (Pull-back): Al arrastrar un tirador por debajo de 0 (con un valor de Y negativo), la animación retrocede brevemente antes de avanzar hacia su destino.
• Desbordamiento (Overshoot): Al elevar un tirador por encima de 1 (con un valor de Y superior a 1.0), el elemento animado supera su posición final para luego regresar y asentarse en el destino definitivo.

Un ejemplo de este comportamiento se encuentra en el ajuste preestablecido "Retroceso al salir", que configura automáticamente la función cubic-bezier(0.34, 1.56, 0.64, 1). En este caso, el valor de y1 es 1.56, lo que provoca que el elemento sobrepase su límite antes de frenar.

Limitaciones de la función cubic-bezier() única

Aunque las curvas de Bezier cúbicas ofrecen una gran flexibilidad para transiciones fluidas, presentan limitaciones estructurales insalvables debido a su naturaleza matemática. Una única función cubic-bezier() solo puede cambiar de dirección un número limitado de veces. Puede realizar una anticipación al inicio y un desbordamiento al final, pero no es capaz de describir movimientos oscilatorios complejos.

Efectos físicos como el rebotar repetidamente contra el suelo (efecto bounce) o la oscilación elástica de un muelle requieren múltiples cambios de sentido. Para implementar este tipo de comportamientos en CSS, no es posible emplear una sola curva de Bezier; se debe recurrir a animaciones basadas en fotogramas clave (@keyframes) o a la función de temporización linear() con múltiples paradas sucesivas.

Integración en hojas de estilo CSS

El código generado se aplica directamente sobre las propiedades de temporización de CSS. Los dos escenarios principales de uso son:

1. Transiciones: Se asigna a la propiedad transition-timing-function o dentro de la propiedad abreviada transition.

.elemento { transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); } 2. **Animaciones:** Se define mediante `animation-timing-function` o dentro de la propiedad abreviada `animation` para controlar el ritmo de los fotogramas clave. css .elemento-animado { animation: desplazamiento 2s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; } ```

Privacidad y procesamiento de datos

El procesamiento de los datos y el renderizado de la curva se realizan de manera local en el equipo del usuario. La aplicación dibuja la representación gráfica directamente en el navegador web. Ninguno de los valores numéricos, coordenadas o configuraciones que se definan en la interfaz se sube a los servidores de BroBroGo, garantizando que el flujo de trabajo técnico se mantenga estrictamente en el ámbito local.

---

Preguntas frecuentes

¿Qué significan los dos tiradores y los cuatro números?

La curva va de abajo a la izquierda (el inicio) a arriba a la derecha (el final): el tiempo avanza de izquierda a derecha y el progreso hacia arriba. Los dos tiradores son los puntos de control que la doblan; cada uno tiene una X y una Y, así que juntos forman cubic-bezier(x1, y1, x2, y2). La X se mantiene entre 0 y 1, mientras que la Y puede subir por encima o bajar por debajo del recuadro para que el movimiento se pase de largo o retroceda antes de asentarse.

¿Cómo uso el valor en mi CSS?

Copia el cubic-bezier() y ponlo donde vaya una función de tiempo: transition-timing-function, animation-timing-function o la forma abreviada, p. ej. transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Las palabras clave ease, ease-in, ease-out y ease-in-out no son más que curvas cubic-bezier fijas, así que elegir uno de esos ajustes te muestra el valor exacto que hay detrás de la palabra clave.

¿Puede hacer un efecto de rebote o elástico?

Por sí solo no. Una única cubic-bezier puede anticipar y pasarse de largo (los ajustes «back» sacan un tirador fuera del recuadro justo para eso), pero solo puede ir en un sentido y luego asentarse. El rebote y el efecto elástico cambian de dirección varias veces, algo que ninguna cubic-bezier única puede expresar; para eso necesitas keyframes de CSS o la función linear() con muchas paradas.

¿Qué ocurre si introduzco un valor fuera de los límites permitidos?

La herramienta corrige automáticamente los valores no válidos al perder el foco del campo de texto. Si introduces un valor de X superior a 1, este se reajustará a 1. Si dejas un campo vacío o con caracteres no numéricos, el sistema esperará a que completes un valor correcto y, si cambias de elemento, restaurará el último valor válido que tuvieras configurado.