Herramienta de curvas de Bézier CSS3

Funciones

• Arrastra cualquiera de los dos puntos de control; la curva y los números se mantienen sincronizados
• El tiempo en horizontal, el avance en vertical: la animación corre más donde la curva se empina
• El eje vertical puede salirse del cuadrado unidad (±0,5 de margen), que es de donde sale el rebote
• Siete preajustes, cada uno con el uso al que pertenece (salida rápida, rebote de entrada, salida muy brusca…)
• Nombra la palabra clave equivalente a tu curva (ease, linear, ease-out…)
• Una vista previa con un cuadrado que se puede reproducir, para juzgar por tacto y no imaginando la curva
• Manejable con teclado: enfoca un tirador y usa las flechas, `Shift` para acelerar y `Alt` para afinar
• Copia un fragmento completo, con los usos en transiciones y en animaciones incluidos

Cómo se usa

1. Arrastra los dos tiradores, o carga antes un preajuste
2. Pulsa «Reproducir» y mira el cuadrado: el tacto convence más que la curva
3. También puedes escribir los valores en las cuatro casillas
4. Copia el CSS de abajo y llévalo a tu hoja de estilos

Preguntas frecuentes

¿Qué son los cuatro números?

Las coordenadas de dos puntos de control: `cubic-bezier(x1, y1, x2, y2)`. La curva va siempre de (0,0) a (1,1), y esos dos puntos la tiran, y por eso el editor tiene dos tiradores y no cuatro. El eje horizontal es el tiempo (del principio al final) y el vertical es el avance (del inicio al destino).

¿Por qué y puede salirse de 0–1?

Porque la especificación no pone límite a y, y salirse es justo de donde viene el rebote: una y mayor que 1 significa «pasa del final y vuelve»; una y menor que 0, «se retrae primero, como una goma tensa», que es como funcionan los preajustes de rebote de entrada y de sobrepaso grande. En cambio x tiene que quedarse dentro de 0–1: fuera de ahí invalida la declaración `transition` entera (no la ignora: deja de aplicarse del todo), así que el editor recorta x mientras arrastras.

¿Qué duración le va bien a la curva?

La duración y la curva se ajustan juntas, porque la misma curva se siente muy distinta a 200ms y a 800ms, lo que aboga por una vista previa que permita cambiar la duración (esta la fija en 900ms, lenta a propósito para que se lea la forma). Reglas de oro: respuesta al pasar el ratón, 150–250ms; movimiento de un elemento, 300–500ms; entradas que deban sentirse vivas, 400–700ms. Cuanto más exagerada es la curva, menos le sienta una duración corta: un sobrepaso comprimido en 120ms se lee como un parpadeo.

¿La curva de aceleración afecta al rendimiento?

No directamente: lo que decide el rendimiento es qué propiedad se mueve (`transform` y `opacity` se resuelven en la capa de composición; `width`, `top` y `box-shadow` provocan recálculo de diseño o repintado), no la curva. La curva solo cambia el aspecto. Hay una excepción que conviene saber: una cubic-bezier le sale barata al navegador, mientras que `steps()` y las animaciones de JavaScript con física pueden convertirse en un cuello de botella en listas largas.